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

【问题标题】：Check transparency in .png image using jquery but without using canvas使用 jquery 但不使用画布检查 .png 图像的透明度
【发布时间】：2012-11-29 14:19:29
【问题描述】：

我正在开发一个应用程序，在该应用程序中放置了 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);

提前谢谢:)

【问题讨论】：

您可以通过让客户端发出 AJAX 请求以及单击图像中的哪个位置来测试它的服务器端。但我不认为你可以在没有画布的情况下在客户端做到这一点。
实际上我想在鼠标移动事件中使用它，您建议的解决方案将通过进行大量 ajax 调用来完成工作，但我想避免这种情况。
也许使用图像映射？ en.wikipedia.org/wiki/Image_map

标签： jquery html css

【解决方案1】：

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

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

【讨论】：