jquery - 使用 jquery 但不使用 canvas 检查 .png 图像中的透明度

Question

我正在开发一个应用程序，我在其中放置了 div 背景，并用 .PNG 图像对其进行了屏蔽。在该 .PNG 图像中有一个透明区域，用户可以从中看到 div 的背景图像。我想知道用户是否单击了 .PNG 图像的透明区域或白色区域。

我找到了这个例子: fiddle example using canvas

但我想在不使用 Canvas 的情况下执行此操作。是否可以？

我只是将 png 图像附加到名为 drop 的 div 上。

var url = "url(./img/imagesapp/background.jpg?"+Math.random()+")";
$('.drop').css('background-image', url)          
var id=triangle;
var test="<img id='img"+id+"' class='shapeOfAC' src='./img/shapes/"+id+".png'/>";
$(".drop").append(test);

提前致谢:)

Answer 1

我能想到的唯一真正的替代方法(没有服务器端的帮助)是编写一些代码来检查 PNG 图像，为每个像素制作一个透明度图，并将其转换为一个长字符串，其中只包含您选择的 alpha channel 可以通过 javascript 读取。

问题在于它会包含大量数据。如果你只是将它存储为一 block HEX，那么它的长度将是 2xHxW 字节。尽管您可以通过对数据进行 gzip 压缩并在 javascript 中解压缩来改进这一点。