[解決済み] 画像の特定のピクセルが透明であるかどうかを確認するにはどうすればよいですか？

質問

PNG 画像の選択された (x,y) 点が透明であるかどうかを確認する方法はありますか?

どのように解決するのですか?

Jeffの回答に基づいて、あなたの最初のステップは、PNGのキャンバス表現を作成することです。 以下では、画像と同じ幅と高さの画面外のキャンバスを作成し、その上に画像を描画しています。

var img = document.getElementById('my-image');
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);

その後、ユーザがクリックしたときに event.offsetX と event.offsetY で位置を取得します。 これを利用して、ピクセルを取得することができます。

var pixelData = canvas.getContext('2d').getImageData(event.offsetX, event.offsetY, 1, 1).data;

1 つのピクセルしか取得しないため、pixelData はピクセルの R、G、B、および A の値を含む 4 つのエントリの配列になります。 アルファについては、255 より小さいものは何らかのレベルの透明度を表し、0 は完全に透明です。

以下はjsFiddleの例です。 http://jsfiddle.net/thirtydot/9SEMf/869/ このすべてにおいて、便宜上jQueryを使用しましたが、決して必要なものではありません。

注意してください。 getImageData はデータ漏洩を防ぐためにブラウザの同一生成元ポリシーに該当します。つまり、他のドメインからの画像や（私はそう信じていますが、一部のブラウザはこれを解決しているかもしれません）任意のドメインからの SVG で canvas を汚した場合、このテクニックは失敗することを意味します。 これは、ログインしているユーザーに対してカスタム画像アセットを提供し、攻撃者がその画像を読み込んで情報を取得しようとするようなケースから保護するためのものです。 同じサーバから画像を提供するか、あるいは クロスオリジンリソース共有 .