Bagaimana cara mendapatkan warna koordinat x, y piksel dari sebuah gambar?

Apakah ada cara untuk memeriksa apakah titik (x, y) yang dipilih dari gambar PNG transparan?

Berdasarkan jawaban Jeff, langkah pertama Anda adalah membuat representasi kanvas PNG Anda. Berikut ini akan membuat kanvas di luar layar dengan lebar dan tinggi yang sama dengan gambar Anda dan memiliki gambar yang digambar di atasnya.

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

Setelah itu, saat pengguna mengklik, gunakan event.offsetXdan event.offsetYuntuk mendapatkan posisi. Ini kemudian dapat digunakan untuk mendapatkan piksel:

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

Karena Anda hanya mengambil satu piksel, pikselData adalah larik empat entri yang berisi nilai R, G, B, dan A. piksel. Untuk alfa, apa pun yang kurang dari 255 mewakili beberapa tingkat transparansi dengan 0 yang sepenuhnya transparan.

Berikut adalah contoh jsFiddle: http://jsfiddle.net/thirtydot/9SEMf/869/ Saya menggunakan jQuery untuk kenyamanan dalam semua ini, tetapi sama sekali tidak diperlukan.

Catatan: getImageData termasuk dalam kebijakan browser asal yang sama untuk mencegah kebocoran data, yang berarti teknik ini akan gagal jika Anda mengotori kanvas dengan gambar dari domain lain atau (saya yakin, tetapi beberapa browser mungkin telah menyelesaikannya) SVG dari domain mana pun. Ini melindungi dari kasus ketika situs menyajikan aset gambar khusus untuk pengguna yang masuk dan penyerang ingin membaca gambar untuk mendapatkan informasi. Anda dapat mengatasi masalah ini dengan menyajikan gambar dari server yang sama atau menerapkan berbagi sumber daya lintas sumber .

Kanvas akan menjadi cara yang bagus untuk melakukan ini, seperti yang dikatakan @pst di atas. Lihat jawaban ini untuk contoh yang bagus:

getPixel dari HTML Canvas?

Beberapa kode yang akan melayani Anda secara khusus juga:

var imgd = context.getImageData(x, y, width, height);
var pix = imgd.data;

for (var i = 0, n = pix.length; i < n; i += 4) {
  console.log pix[i+3]
}

Ini akan berjalan baris demi baris, jadi Anda harus mengubahnya menjadi x, y dan mengubah perulangan for menjadi pemeriksaan langsung atau menjalankan bagian dalam bersyarat.

Membaca pertanyaan Anda lagi, sepertinya Anda ingin mendapatkan poin yang diklik orang tersebut. Ini dapat dilakukan dengan mudah dengan event klik jquery. Jalankan saja kode di atas di dalam handler klik seperti:

$('el').click(function(e){
   console.log(e.clientX, e.clientY)
}

Itu harus mengambil nilai x dan y Anda.

Dua jawaban sebelumnya menunjukkan cara menggunakan Canvas dan ImageData. Saya ingin mengajukan jawaban dengan contoh runnable dan menggunakan kerangka kerja pemrosesan gambar, jadi Anda tidak perlu menangani data piksel secara manual.

MarvinJ menyediakan metode image.getAlphaComponent (x, y) yang hanya mengembalikan nilai transparansi piksel dalam koordinat x, y. Jika nilai ini 0, piksel benar-benar transparan, nilai antara 1 dan 254 adalah tingkat transparansi, akhirnya 255 buram.

Untuk mendemonstrasikan saya telah menggunakan gambar di bawah (300x300) dengan latar belakang transparan dan dua piksel pada koordinat (0,0) dan (150.150) .

Keluaran konsol:

(0,0): TRANSPARAN
(150.150): NOT_TRANSPARENT

image = new MarvinImage();
image.load("https://i.imgur.com/eLZVbQG.png", imageLoaded);

function imageLoaded(){
  console.log("(0,0): "+(image.getAlphaComponent(0,0) > 0 ? "NOT_TRANSPARENT" : "TRANSPARENT"));
  console.log("(150,150): "+(image.getAlphaComponent(150,150) > 0 ? "NOT_TRANSPARENT" : "TRANSPARENT"));
}

<script src="https://www.marvinj.org/releases/marvinj-0.7.js"></script>

Dengan: i << 2

const data = context.getImageData(x, y, width, height).data;
const pixels = [];

for (let i = 0, dx = 0; dx < data.length; i++, dx = i << 2) {
    if (data[dx+3] <= 8)
        console.log("transparent x= " + i);
}