2

私は 2 色 (例: 赤と青) の PNG 画像を持っています。javascript または html5 を使用すると、赤を黄色に、青を緑などに変更できますか?

4

2 に答える 2

4

プレゼンテーション用のフィドルを作成しました: http://jsfiddle.net/tyduD/1/

実際にはすべての色を変更できますが、最初に 3 つの主要なカラー チャネル (およびアルファ チャネル) の各ピクセルのピクセル値を取得する必要がありますが、これはそれほど重要ではありませんが、データをループするときは考慮する必要があります。チャンネル）。3 つのカラー コンポーネントすべてに個別のデータ チャネルがあります ( RGB)。

最初に、キャンバス コンテキストへの参照を取得する必要があります。次に、データ プロパティを、ピクセルの色の値を格納するピクセル配列に割り当てます。

var imageData = context.getImageData(0, 0, width, height);
var data = imageData.data;

二重ループを使用して、カラー チャネルを反復し、ここでピクセル操作を行います。

for (var y = 0; y < height; y++) {
    for (var x = 0; x < width; x++) {
        var index = (x + width * y) * 4;
        data[index+0] = data[index+2];
        data[index+1] = 255 - data[index+1];
        data[index+2] = 255 - data[index-1];

    }
}

キャンバスとピクセルの操作に関する優れたリソースは次のとおりです: http://dev.opera.com/articles/view/html-5-canvas-the-basics/#pixelbasedmanipulation

于 2012-10-24T19:13:00.647 に答える
1

はい、できます。

まず、画像の imageData を取得する必要があります:

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var img = document.getElementById('myimg');
context.drawImage(img, 0, 0 );
var myData = context.getImageData(0, 0, img.width, img.height);

次に、画像内のそれぞれの (myData[i]赤の場合) とmyData[i+2](青の場合) の値を変更するだけです。i

最後に、 を使用して imageData をキャンバスに戻します context.putImageData。

この参照を参照してください：キャンバスを使用したピクセル操作

于 2012-10-24T15:27:17.107 に答える