jQuery忽略图像的透明区域

Question

我想在这里做点什么：

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

但是，如果我只是从此站点复制pixelSelection.js文件，它就不起作用。我真的想做自己的，而不仅仅是别人写的东西，但是我怎么做才能做到这一点。

我已经尝试过.svg和图像映射，但即使我是图像地图，我也不能将背景图像悬停在前景透明区域内，而且很难详细地映射每个图像。

Answer 1

雅我的脚本的旧版本有点儿错误，我最近使用更加可配置和更清晰的jquery插件版本更新了它。我也在github上发布了它。

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

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

Answer 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');
});