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

我正在学习HTML5，在做一些基本的事情，比如画布像素操作时，我发现当我想改变颜色通道时，Opera会完全弄乱图像。 我制作了一个小的测试页面，应该可以说明这一点：（注意：“预期结果”图像是动态加载的，服务器有点慢）

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

for（变量i=0，l=matrix.data.length；i255）矩阵数据[i]=255；
如果（矩阵数据[i]<0）矩阵数据[i]=0；
}

在Chrome、Firefox、IE9和Safari中，它就像一个符咒。然而，在Opera中，我得到了两种转换的结果：

---

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

如果我不得不猜测的话，我会说红色通道的值是围绕着某个无效值的。请注意（在源图像中），有缺陷的区域总体上都比经过适当处理的区域亮得多

它可能是在进行某种限制检查，将像素的红色值归零，原始红色值+128将超过用于表示颜色分量的最大值（uint 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);
}

//抱歉，我的JavaScript非常生锈，我不会这样做。
对于（变量i=0，l=matrix.data.length；i255）新红色=255；
如果（（当前红色-增量）<0）新红色=0；
else new_red=当前_red+增量；
}
//我要做的是：
对于（变量i=0，l=matrix.data.length；i

我这样做：

如果（matrix.data[I]>255）matrix.data[I]=255；如果（矩阵数据[i]<0）矩阵数据[i]=0。其他浏览器似乎也能很好地使用它。对不起，我应该把这个放在问题主体里。我现在已经在问题描述中添加了这一点。我不知道这是否只是firefox的愚蠢和自动更正HTML，但似乎你没有正确关闭一个，并且还有一个虚假的标记。哈哈，不，是我在复制粘贴方面失败了。修复了（虽然速度较慢的服务器可能会缓存一段时间），但这并不能改善这种情况。另一件事是在检查之前添加。这意味着，例如，如果将128添加到230，可能会得到102。此时，您的检查都报告为OK，因此未执行任何操作。你应该检查的是当前值+-增量不超过255，或低于0。你是天才，我是白痴！这正是正在发生的事情——显然Opera是唯一一个在计算之后而不是在绘图期间使用单字节封顶的浏览器。现在它工作得很好，非常感谢！！
// 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);
}