javascript - 我怎么知道我是在点击网页上 png 的透明部分还是非透明部分？

Question

我们有一个多年前在 Flash 中开发的测验，它使用点击区域来确定是否有人点击了图像的适当部分(想想“解剖测验”)。这些命中区域的轮廓非常繁琐，无法重复使用轮廓坐标数据...

现在，我们正尝试用 HTML 重新做这件事 -- 所以，我们有一个股骨的背景图像和一个 png，它在 Z 顺序中位于更高的位置，其中一部分完全透明，而其他部分有 50% 的灰色。这用于告诉学生背景股骨图像上的什么地方。

我希望能够在“测验模式”中使用来自该 png mask 层的数据来确定学生是否正确点击了股骨的特定部分...我正在考虑设置 mask png到 100% 透明度(因此学生看不到它)，但如果浏览器知道他们点击了图像的正确区域(即蒙版上 100% 透明)，那么他们点击正确。

关于如何使用 HTML、CSS 和/或 jQuery 实现这一点有什么想法吗？

Answer 1

var imgData,
     width = 200,
    height = 200;

$('#mask').bind('mousemove', function(ev){
    if(!imgData){ initCanvas(); }
    var imgPos = $(this).offset(),
      mousePos = {x : ev.pageX - imgPos.left, y : ev.pageY - imgPos.top},
      pixelPos = 4*(mousePos.x + width*mousePos.y),
         alpha = imgData.data[pixelPos+3];

    $('#opacity').text('Opacity = ' + ((100*alpha/255) << 0) + '%');
});

function initCanvas(){
    var canvas = $('<canvas width="'+width+'" height="'+height+'" />')[0],
           ctx = canvas.getContext('2d');

    ctx.drawImage($('#mask')[0], 0, 0);
    imgData = ctx.getImageData(0, 0, width, height);
}

此代码将 base64 图像加载到 Canvas 中，并使用 getImageData 获取图像的二维 RGBA 表示。然后它使用鼠标的位置来查找图像中该点的 Alpha 值(不透明度)。 Canvas ImageData以 4 (RGBA) 为一组存储在二维数组中。您要查找的是“A”，因此数组中的每个第四个 值。当发现像素位置时，您可以在代码中看到这一点，它将鼠标的位置乘以 4，然后为了得到它添加 3 的 alpha 值(添加 0 会得到 R，1 会得到 G，2 会得到你 B).

https://jsfiddle.net/ey1d5vgr/

截至 2011 年，这在 IE 中不起作用。此外，图像必须与站点位于同一域中，因此没有外部图像，这就是此示例使用数据 URI 的原因。