Operaでのキャンバスピクセル操作のバグ

Question

私はHTML5を学習しています。キャンバスピクセル操作のようないくつかの基本的な操作を行うと、カラーチャネルを変更するときにオペラが完全に画像を乱すことがわかりました。 http://gda.0fees.net/tests/opera/canvas2.html（NB：「期待される結果」の画像が動的に読み込まれ、サーバーの速度が遅い）という小さなテストページを作成しました。

スクリプトは画像を取得し、すべてのピクセルの赤の値を一様に変更します。ここでは（あなたは上記のリンクを経由してフルで見ることができます）私のコードの中心点です：クロム、Firefoxの、IE 9では

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; 
} 

は、およびSafariはそれが魔法のように動作します。しかし、Operaでは、両方の変換でこの結果が得られます。http://gda.0fees.net/tests/opera/opera.jpg

私は何か間違っていますか？これは既知のバグですか？それは抑制できますか？

Answer 1

私が推測しなければならないのは、赤のチャンネルの値が何らかの無効な値にラップしていたと言えます。バグのある領域は、適切に処理された領域よりも全体的にはるかに明るいことに注意してください（ソースイメージ内）。

元の赤の値+ 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); 
}