2

キャンバスにいくつかの画像データがあります。次に、画像の左半分を取得し、それを反転して、ミラー効果のように右に適用する必要があります。

例、これから：

ここに画像の説明を入力してください

これに：

ここに画像の説明を入力してください

私はここまで到達しました（画像データの準備ができています）：

ctx.drawImage(this, 0, 0, 960, 540);
var imgData = ctx.getImageData(0,0,960,540);
// loop through the data and apply mirror ??

幅と高さは既知です。何か案は？

4

1 に答える 1

2
  1. 画像データをループする
  2. 現在のピクセルが画像の左半分にある場合は、右の位置にコピーします。
for(var y = 0; y < height; y++) {
    for(var x = 0; x < width / 2; x++) { // divide by 2 to only loop through the left half of the image.
        var offset = ((width* y) + x) * 4; // Pixel origin

        // Get pixel
        var r = data[offset];
        var g = data[offset + 1];
        var b = data[offset + 2];
        var a = data[offset + 3];

        // Calculate how far to the right the mirrored pixel is
        var mirrorOffset = (width - (x * 2)) * 4;

        // Get set mirrored pixel's colours 
        data[offset + mirrorOffset] = r;
        data[offset + 1 + mirrorOffset] = g;
        data[offset + 2 + mirrorOffset] = b;
        data[offset + 3 + mirrorOffset] = a;
    }
}

私はこれをテストしていませんが、(多かれ少なかれ) 動作するか、少なくともその方法についてのアイデアが得られるはずです。

于 2012-12-18T12:28:26.560 に答える