我怎么知道如果我点击一个网页上的png透明或不透明的部分

How can I know if I am clicking on a transparent or non-transparent part of a png on a web page?

本文关键字：png 透明 不透明 网页 一个 如果 我怎么知道      更新时间：2023-09-26

几年前我们在Flash中开发了一个测试，使用点击区域来确定是否有人点击了图像的适当部分(想想'解剖测试')。这些命中区域是非常繁琐的轮廓，没有办法重用轮廓坐标数据…

现在，我们试图在HTML中重新做这件事——所以，我们有一个股骨的背景图像和一个png，它位于z轴上，它的一部分是完全透明的，而其他部分有50%的灰色。这是用来教学生在背景股骨图像上的位置。

我希望能够在"测验模式"中使用png蒙版层的数据来确定学生是否正确点击了股骨的特定部分…我想把png的遮罩设置成100%的透明度(这样学生就看不到了)，但是如果浏览器知道他们点击的是图片的正确区域(遮罩是100%透明的)，他们就会正确点击。

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

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图像加载到画布中，并使用getImageData来获得图像的2d RGBA表示。然后，它使用鼠标的位置来查找图像中该点的Alpha值(不透明度)。Canvas ImageData以4组(RGBA)的形式存储在2d数组中。你要找的是"A"，所以数组中的每第四个值。当发现像素位置时，你可以在代码中看到这一点，它将鼠标的位置乘以4，然后再加上3来获得alpha值(添加0会得到R, 1会得到G, 2会得到B)。

https://jsfiddle.net/ey1d5vgr/

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

我认为您需要处理该服务器端，或者找到一个可以逐像素解码图像的javascript库。

在PNG透明部分上的点击事件仍然会被PNG捕获。对于以z为索引的半透明PNG来说，这是相当不直观的，但这是标准行为。

这里是在动作脚本中完成的…(我认为)我不知道如何或如果它可以在Javascript虽然

http://dougmccune.com/blog/2007/02/03/using-hittestpoint-or-hittest-on-transparent-png-images/

我的第一个想法是建立图像映射，这样你就可以控制点击什么。

除此之外，我不知道，我不认为你可以直接点击PNG。

对不起，在png中没有办法这样做。

您需要一些其他类型的掩码，HTML图像映射是最简单的方法，或者根据您的浏览器依赖，SVG是一个选项。

相关文章：