在Opera中画布像素操作的bug

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, ie9和Safari中，它就像一个魅力。然而，在Opera中，我得到了这两个转换的结果:http://gda.0fees.net/tests/opera/opera.jpg

我做错了什么吗?这是已知的bug吗?它能被抑制吗?

Answer 1

如果让我猜的话，我会说红色通道的值是绕到一些无效的值。请注意(在源图像中)，有bug的区域总体上比正确处理的区域要亮得多。

这可能是它在做某种限制检查，在原始红色值+ 128超过用于表示颜色组件的最大值的地方将像素的红色值归零。

我以前从未使用过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);
}