1

Android 4.1.2 (Samsung GT-N8010 タブレット) のデフォルトのインターネット ブラウザで非常に奇妙なバグに遭遇しました。

生産コードを、バグを再現できる単純なjsfiddle (http://jsfiddle.net/Lnd3v/)にまとめました。

ケース 1は、赤と透明の市松模様のキャンバスを作成し、それを青のキャンバスに描画して、青と赤の市松模様を作成します。キャンバスのサイズは 400x200 です。期待どおりに動作します。

ケース 2は白黒のチェッカーボード キャンバスを作成し、ピクセルごとの操作によってそれらを透明と赤に変更し、最後に赤と透明になったキャンバスを青のキャンバスに描画します。最初のケースと同じキャンバス サイズ。最初のケースと同じ最終結果を生成します。

ケース 3は、キャンバスのサイズが 400x350 になったことを除いて、ケース 2とまったく同じです。ブルーが魔法のようにマゼンタに変わりました！

白黒のキャンバスを透明と色 (このテストでは赤) に変換する JavaScript 関数は次のようになります。

var convertGreyscaleToTintedTransparentCanvas = function (canvas, r, g, b) {
    "use strict";

    var ctx, imageData, length, offset, data;

    ctx = canvas.getContext('2d');
    imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    data = imageData.data;
    length = data.length;

    for (offset = 0; offset < length; offset += 4) {
        data[offset + 3] = data[offset];
        data[offset] = r;
        data[offset + 1] = g;
        data[offset + 2] = b;
    }

    ctx.putImageData(imageData, 0, 0);
};

ケース 1 は、キャンバス サイズが 400x200 から 400x350 に変更された場合でも、期待どおりに機能します (ケース 3 が壊れます)。また、ケース 3 では、透明で赤いキャンバスが正しく表示されます。

以前にこのような同様の問題に遭遇した人はいますか? この動作をする Android のバージョンと、このバグを回避するための巧妙なアイデアを誰かが持っているかどうかを知りたいです。

4

0 に答える 0