web-dev-qa-db-ja.com

画像からピクセルカラーを取得する

ブラウザに画像があります。

画像が回転しているかどうかに関係なく、画像の色の左上のピクセルを取得します（座標：0,0）。

Javascriptまたはphpコードを使用してそれを行うにはどうすればよいですか？

javascriptimagepixel
19
Eitan
  • キャンバスdocument.createElementを作成します
  • 2Dコンテキストを取得canvas.getContext('2d')
  • キャンバスに画像を描画しますcontext.drawImage(image, x, y)
    • 画像が同じドメインのものであるか、そのピクセルにアクセスできないことを確認してください
  • 画像のピクセルデータを取得するcontext.getImageData(x1, y1, x2, y2)
    • 左上だけが欲しいので、context.getImageData(0, 0, 1, 1)
  • GetImageDataの結果には、dataフィールド(context.getImageData(0,0,1,1).data）
    • 配列には、r、g、b、およびaの値があります。
42
Louis Ricci

ブラウザ上の画像の場合、最初に画像をサーバーに転送できない限り、PHPを使用できません。

nブラウザで、canvasに画像を描画できる場合は、getImageData()メソッドを使用できます。

var myImg = new Image();
myImg.src = 'image.jpg';
var context = document.getElementById('canvas').getContext('2d');
context.drawImage(myImg, 0, 0);
var data = context.getImageData(x, y, 1, 1).data;

回転を許可する必要があります-おそらくどの回転が適用されたかを知っているでしょう。

15
user1864610