Bagaimana untuk Menentukan sama ada Piksel dalam Imej PNG adalah Lutsinar?

Menentukan Ketelusan Piksel dalam Imej PNG

Mengesahkan ketelusan piksel individu dalam imej PNG ialah tugas biasa untuk pembangun web. Artikel ini meneroka penyelesaian kepada cabaran ini.

Menyemak Ketelusan Piksel

Untuk menentukan sama ada piksel tertentu pada koordinat (x, y) imej PNG adalah lutsinar, seseorang boleh memanfaatkan fungsi getImageData() yang disediakan oleh API Kanvas HTML5.

Mencipta Kanvas Luar Skrin

Sebagai langkah awal, buat perwakilan kanvas luar skrin bagi imej PNG menggunakan kod berikut:

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

Mengambil Data Piksel

Setelah interaksi pengguna, tangkap koordinat klik menggunakan event.offsetX dan event.offsetY dan dapatkan data piksel seperti berikut:

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

Menyemak Saluran Alfa

Susun atur pixelData mengandungi empat nilai yang sepadan dengan piksel merah, hijau, biru dan alfa ( ketelusan) komponen. Untuk alfa, nilai kurang daripada 255 menunjukkan ketelusan.

Contoh Pelaksanaan

Kod berikut menunjukkan teknik ini:

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

Pertimbangan Tambahan

Ingat bahawa Fungsi getImageData() tertakluk kepada dasar asal yang sama penyemak imbas, bermakna ia mungkin gagal jika imej dimuatkan daripada domain lain atau SVG daripada mana-mana domain. Untuk menangani perkara ini, pertimbangkan untuk menyiarkan imej daripada pelayan yang sama atau melaksanakan perkongsian sumber silang asal.

Atas ialah kandungan terperinci Bagaimana untuk Menentukan sama ada Piksel dalam Imej PNG adalah Lutsinar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!