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

Question

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

我找到了这个例子： fiddle example using 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 通道的长字符串，您可以通过javascript。

但是，问题在于它会包含大量数据。如果您仅将其存储为 HEX 的一部分，则长度为 2xHxW 字节。尽管您可以通过 gzip 压缩数据并在 javascript 中解压缩它来改善这一点。