Question

我正在学习HTML5，在做一些像画布像素操作这样的基本操作时，发现当我想要更改颜色通道时，Opera会完全弄乱图像。我已经制作了一个应该说明的小测试页面：http://gda.0fees.net/tests/opera/canvas2.html（注意：“预期结果”图像是动态加载的，服务器有点慢。）

脚本采用图像并以统一的方式更改每个像素的红色值。这是我的代码的中心点（您可以通过上面的链接完整地看到）：

for (var i = 0, l = matrix.data.length; i < l; i += 4)
{
    matrix.data[i] += delta;
    if (matrix.data[i] > 255) matrix.data[i] = 255;
    if (matrix.data[i] < 0  ) matrix.data[i] = 0;
}

在Chrome，Firefox，IE 9和Safari中，它的功能就像魅力一样。但是，在Opera中，我得到了两个转换的结果：http://gda.0fees.net/tests/opera/opera.jpg

我做错了吗？这是一个已知的错误？可以抑制吗？

Answer 1

如果我不得不猜测我会说红色通道值包围到某个无效值。注意（在源图像中），有缺陷的区域总体上比正确处理的区域更亮。

它可能会进行某种限制检查，将原始红色值+ 128超过用于表示颜色分量的最大值（可能是8个？）的像素的红色值归零。

我以前从未使用过HTML5的画布，但是如果你可以对每个像素的颜色进行采样，你可以通过猜测最大值并检查以确保在增加该特定值时不要超过它来抑制它。像素的颜色分量。

试试这个：

// Apologies, my JavaScript is very rusty, and this isn't how I would do this.
for (var i = 0, l = matrix.data.length; i < l; i += 4)
{
    var current_red = matrix.data[i];
    var new_red = 0;

    if((current_red + delta) > 255) new_red = 255;
    else if((current_red - delta) < 0) new_red = 0;
    else new_red = current_red + delta;
}

// What I would do is this:
for (var i = 0, l = matrix.data.length; i< l; i+=4)
{
    // I don't know if JS has a clamp function :D
    matrix.data[i] = clamp(matrix.data[i] + delta, 0, 255);
}

Opera中画布像素操作中的错误

1 个答案: