javascript - 通过 alpha channel 的图像贴图

Question

<img src="circle.png" onclick="alert('clicked')"/>

假设 circle.png 是一个 400x400 像素的透明背景图像，中间有一个圆圈。

我现在得到的是整个图像区域 (400x400px) 都是可点击的。我想要的是只有圆圈(非透明像素)是可点击的。

当然我知道在这个例子中我可以使用 <map>标记和圆形区域，但我正在寻找一种通用解决方案，该解决方案将考虑实际图像透明度并适用于任何类型的图像(即非规则形状)。

我能看到的最复杂的方法是根据每个像素 alpha 追踪图像的轮廓，转换为路径(可能会简化)并作为 map 应用。

是否有更有效/更直接的方法来做到这一点？

Answer 1

使用 canvas 标签，您可以确定给定点下像素的颜色值。您可以使用事件数据来确定坐标，然后检查透明度。剩下的就是将图像加载到 Canvas 中。

首先，我们会处理:

  var ctx = document.getElementById('canvas').getContext('2d');
  var img = new Image();
  img.onload = function(){
    ctx.drawImage(img,0,0);
  };
  img.src = [YOUR_URL_HERE];

第一位获取 Canvas 元素，然后创建一个 Image 对象。当图像加载时，它被绘制在 Canvas 上。非常简单!除非...如果图像与代码不在同一个域中，那么您将面临同域策略安全性。为了获取图像数据，我们需要将图像托管在本地。您还可以对图像进行 base64 编码，这超出了本答案的范围。 (有关执行此操作的工具，请参阅 this url)。

接下来，将您的点击事件附加到 Canvas 。当该点击进入时，我们将检查透明度并仅针对非透明点击区域采取行动:

    if (isTransparentUnderMouse(this, e))
        return;
    // do whatever you need to do
    alert('will do something!');

魔法发生在函数 isTransparentUnderMouse 中，它需要两个参数:目标 Canvas 元素(点击处理程序范围内的 this)和事件数据(e，in这个例子)。现在我们来谈谈肉:

var isTransparentUnderMouse = function (target, evnt) {
    var l = 0, t = 0;
    if (target.offsetParent) {
        var ele = target;
        do {
            l += ele.offsetLeft;
            t += ele.offsetTop;
        } while (ele = ele.offsetParent);
    }
    var x = evnt.page.x - l;
    var y = evnt.page.y - t;
    var imgdata = target.getContext('2d').getImageData(x, y, 1, 1).data;
    if (
        imgdata[0] == 0 &&
        imgdata[1] == 0 &&
        imgdata[2] == 0 &&
        imgdata[3] == 0
    ){
        return true;
    }
    return false;
};

首先，我们来回跳动以获得相关元素的精确位置。我们将使用该信息传递给 canvas 元素。 getImageData 将为我们提供一个 data 对象，其中包含我们指定位置的 RGBA。

如果所有这些值都是 0，那么我们正在查看透明度。如果没有，则存在一些颜色。 -edit- 如评论中所述，我们真正需要查看的唯一值是上例中的最后一个 imgdata[3]。值为 r(0)g(1)b(2)a(3)，透明度由 a、alpha 确定。您可以使用相同的方法在您知道 rgba 数据的任何不透明度下找到任何颜色。

在这里试试:http://jsfiddle.net/pJ3MD/1/

(注意:在我的示例中，由于我提到的域安全性，我使用了 base64 编码的图像。您可以忽略该部分代码，除非您还打算使用 base64 编码)

同样的例子，只是为了好玩而改变了鼠标光标:http://jsfiddle.net/pJ3MD/2/

文档

MDN 上的
• Image 对象 - https://developer.mozilla.org/en/DOM/Image
• 在 MDN 上通过 canvas 使用图像的教程 - https://developer.mozilla.org/en/Canvas_tutorial/Using_images
• MDN 上的 Canvas 门户 - https://developer.mozilla.org/en/HTML/Canvas
MDN 上的
• HTML canvas 元素 (getContext) - https://developer.mozilla.org/en/DOM/HTMLCanvasElement/
MDN 上的
• CanvasRenderingContext2D (getImageData) - https://developer.mozilla.org/en/DOM/CanvasRenderingContext2D
• MDN 上的像素操作 - https://developer.mozilla.org/En/HTML/Canvas/Pixel_manipulation_with_canvas/