Eğer bir PNG resmin(x,y) seçilen bir nokta şeffaf olup olmadığını kontrol etmek için herhangi bir yolu var mı?

Jeff cevabı üzerinde yapı, ilk adımı PNG tuval bir temsilini oluşturmak olacaktır. Aşağıdaki resim aynı genişlik ve yükseklik ve görüntü üzerine çizilmiş olan kapalı-ekranı bir tuval oluşturur.

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

Bir kullanıcı tıkladığında sonra, event.offsetX event.offsetY pozisyon almak için kullanın. Bu da piksel elde etmek için kullanılabilir:

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

Sadece bir piksel kapma çünkü, pixelData dört giriş bir dizi pikselin R, G, B, ve değerleri içeren. Alfa için bir şey 255'ten az 0 ile şeffaflık belli bir düzeyde tamamen şeffaf olmayı temsil eder.

Burada jsFiddle bir örnektir: bu kolaylık için jQuery kullandım, ancak hiçbir şekilde http://jsfiddle.net/thirtydot/9SEMf/869/ gerekli.

Not:getImageData falls altında tarayıcının aynı kaynak politikası için veri sızıntıları önlemek, yani bu teknik başarısız olur kirli tuval ile bir görüntüden başka bir etki alanı veya (inanıyorum, ama bazı tarayıcılar olabilir çözüldü bu) SVG herhangi bir etki alanı. Bu bir site açmış bir kullanıcı için özel bir görüntü varlığı kadar hizmet vermektedir ve bir saldırganın bilgi almak için resmi okumak istediği durumlarda karşı korur. Ya aynı sunucudan resmi hizmet veya Cross-origin resource sharing uygulayarak sorunu çözebilir.