jQuery忽略图像的透明区域答案

【问题标题】：jQuery ignore transparent areas of imagesjQuery忽略图像的透明区域
【发布时间】：2011-03-22 17:23:21
【问题描述】：

我想为这里所做的事情做点什么：

http://www.cw-internetdienste.de/pixelselection/

但是，如果我只是从该站点复制 pixelSelection.js 文件，它将不起作用。我真的很想自己做，不仅仅是别人写的东西，但我不知道该怎么做。

我试过.svg和图片映射在一起，但是即使我图片映射我也无法将背景图片悬停在前景透明区域内，而且很难详细映射每张图片。

【问题讨论】：

FWICT，此页面上的代码应该可以在其他地方使用...您有没有在您自己的网站上无法使用的示例？
当然：emilmoe.dk - 我一定是在某处误解了某个细节
好吧，pixelselection 页面不适合我。我总是得到undefined clicked!，所以问题可能不是你的实现，而是示例。

标签： jquery canvas

【解决方案1】：

是的，我的脚本的旧版本有点错误，我最近用更可配置和更清洁的 jquery 插件版本对其进行了更新。我也在github上发布了它。

http://www.cw-internetdienste.de/pixelselection/

也许新版本可能会帮助您解决问题。

【讨论】：

【解决方案2】：

您可以使用this SO question 的答案，以便使用 JavaScript 获取图像像素的 RGBA 值，我称之为：

isTransparrent(imageUrl, x, y);

然后，每当您将鼠标悬停在图像上时，您都可以使用该功能进行检查：

$('#some-image').hover(function(e) {
    var isTrans = isTransparent(
        this.src,
        e.pageX - $(this).pageX, // relative x position in image
        e.pageY - $(this).pageY  // relative y position in image
    );
    console.log(isTrans ? 'transparent pixel', 'not transparent pixel');
});

【讨论】：