PNG 画像のピクセルが透明かどうかを判断するにはどうすればよいですか?

PNG 画像のピクセルの透明度の決定

PNG 画像内の個々のピクセルの透明度を検証することは、Web 開発者にとって一般的なタスクです。この記事では、この課題の解決策を検討します。

ピクセルの透明度の確認

PNG 画像の座標 (x, y) にある特定のピクセルが透明かどうかを判断するには、次のようにします。 HTML5 の Canvas が提供する getImageData() 関数を活用できます。 API.

オフスクリーン キャンバスの作成

準備ステップとして、次のコードを使用して 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;

アルファ チャネルの確認

pixelData 配列には、ピクセルの赤、緑、青、アルファに対応する 4 つの値が含まれています（透明）コンポーネント。アルファの場合、255 未満の値は透明度を示します。

実装例

次のコードは、この手法を示しています。

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);

img.addEventListener('click', function(e) {
  var pixelData = canvas.getContext('2d').getImageData(e.offsetX, e.offsetY, 1, 1).data;
  console.log(pixelData[3] < 255 ? 'Transparent' : 'Opaque');
});

追加の考慮事項

次の点に注意してください。 getImageData() 関数はブラウザの同一生成元ポリシーの対象となるため、画像が別のドメインから読み込まれた場合、または任意のドメインの SVG から読み込まれた場合に失敗する可能性があります。これに対処するには、同じサーバーからイメージを提供するか、クロスオリジン リソース共有を実装することを検討してください。

以上がPNG 画像のピクセルが透明かどうかを判断するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。