0

私が達成したいことを説明させてください。

私はただ楽しみのために、そして次のような学習実験として何かを構築しています

www.milliondollarhomepage.com

ただし、同じことを実現するために、canvasやFabric.jsを使用したいと思います。キャンバスの各ピクセルを操作するにはどうすればよいですか？

シナリオ：

  • グラブ用に1000ピクセルを提供したいと思います。
  • ユーザーは画像とそれをキャンバス上のどこに配置するかを選択できます
  • 画像は、ユーザーが必要とするピクセル数に応じてサイズを変更し、残りのピクセル全体から差し引くことができます。

これに関するどんな助けもいただければ幸いです！

4

1 に答える 1

2

個々のピクセルを操作するためのHTML5キャンバスAPIのメソッドは次のとおりです。

context.getImageData(x,y,width,height);

例えば

var map = context.getImageData(0,0,canvas.width,canvas.height);

これにより、次の順序で含まれる大規模な配列が返されます。

[red,green,blue,alpha,red,green,blue,alpha...]

すべて4の数字は、選択した領域のすべての単一ピクセルの赤、緑、青、およびアルファチャネルを、左から右、上から下に表します。

これらの各数値の値は、からの範囲の整数0 - 255です。

たとえば、すべてのピクセルをループしてそれらのチャネルredとblueチャネルをドロップし、画像を緑色にします。

//assume map variable from earlier

for(var i = 0; i < map.data.length; i+=4){
    map.data[i] = 0; // drop red to 0
    map.data[i+2] = 0; // drop blue to 0
}
context.putImageData(map,0,0);

例を参照してください

この手順はサーバー上でのみ実行でき、他のドメインからの画像がキャンバスを「汚染」することはありません。これらの要件が満たされない場合、セキュリティエラーDOM例外がスローされます。

于 2013-03-09T02:39:57.237 に答える