イメージからピクセルカラーを取得する

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

どうすればjavascriptやPHPコードを使ってそれを行うことができますか？

2013-07-22 Eitan

可能デュープ、JavaScriptで画像から画素（x、y）を取得する方法：http://stackoverflow.com/questions/8751020/how-to-get-a-pixels-color -of-an-image –

PHPソリューションの場合は、[phpを使用して画像の最初のピクセルを取得する]を参照してください（http://stackoverflow.com/questions/14178182/get-the-first-pixel-from-the-image- using-php）を使用します。あなたが埋め込まれたイメージではなくレンダリングされたページのイメージを望むなら、それはあなたを助けません。レンダリングされたページのピクセルカラーを取得するには、[JavaScriptのスポイト（マウスカーソルの下のピクセルの色を教えてください）]で受け入れられる回答を参照してください（http://stackoverflow.com/questions/1936021/javascript-eyedropper-tell-color-of -pixel-under-mouse-cursor）を使用します。 – user

画像からピクセルのx、y座標の色を取得する方法は？（https://stackoverflow.com/questions/8751020/how-to-get-a-pixels-xy-coordinate-color-from -an-image） –

キャンバスのdocument.createElement
を作成し、2Dコンテキストcanvas.getContext('2d')
がキャンバスに画像を描画取得context.drawImage(image, x, y)
- ていることを確認した画像は、同じドメインからであるか、アクセス権を持っていません。その画素に
画像context.getImageData(x1, y1, x2, y2)
- は、あなたはそれが配列のr、g、bとa値を持つことになります
  - dataフィールド）だでそうcontext.getImageData(0, 0, 1, 1)
- getImageDataの結果は、画素の配列を持つことになりますちょうど左上をしたいです。

出典

2013-07-22 13:47:24

ありがとうございます。私はあなたが非常に速い答えのための報酬を持っているべきだと思います。ブラウザがhtml5をサポートしていない場合はどうなりますか？ PHPコードには何か解決策がありますか？ – Eitan

@Eitan - キャンバスをサポートしていない場合は、サーバー側のコードを使用してピクセルデータを取得したり、Flash/Silverlightアボミネーションを使用してそのデータを処理するために、AJAXリクエストで画像をサーバーに渡す必要があります。 –

注意事項：drawImageでレンダリングされたピクセル値は、色空間補正のために画像の値と異なる場合があります。画像に色空間情報が含まれている場合にのみ、これが発生することをお勧めします。 – ironic

ブラウザで画像を表示するには、まず画像をサーバーに転送できない限りPHPを使用できません。あなたはcanvasで画像を描くことができた場合

Nブラウザは、あなたがgetImageData()メソッドを使用することができます。

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

あなたが任意の回転を可能にする必要があるだろう - おそらくあなたが適用されたものを回転知っています。

出典

2013-07-22 13:47:21

キャンバスサイズはイメージの幅以上に設定する必要があります。さもなければキャンバスの解像度の外のピクセルは黒ではなくても、 –

イメージからピクセルカラーを取得する

答えて

関連する問題