HTML - 从具有透明度的 PNG 图像中实现具有自定义可点击形状的按钮答案

【问题标题】：HTML - Implementing a button with a custom clickable shape from a PNG image with transparencyHTML - 从具有透明度的 PNG 图像中实现具有自定义可点击形状的按钮
【发布时间】：2017-10-07 09:30:35
【问题描述】：

我有以下PNG 透明图片：

我想在HTML 和CSS 中创建一个按钮，使用alpha 频道作为掩码，这样它只有在用户点击粉红色区域时才有效。

这可能吗？如何实现？

【问题讨论】：

这是让用户感到尴尬的一种方式 - 必须单击按钮的特定区域才能使其工作....重温用户友好性！
这是一个交互式网站，有一个运行小游戏的网络应用程序，图像只是一个极端的例子！
@Andreww 有人解决了你的问题吗？如果是这样，您能否接受最佳答案（单击点下的复选标记）。这将帮助遇到您的问题的其他用户快速发现接受的答案，并且还提供 15 个代表。指向作者（：

标签： javascript html css click mask

【解决方案1】：

您需要将图像绘制成canvas 以获取像素值并检查 alpha 通道值：

const messageBox = document.getElementById('messageBox');
const imageButton = document.getElementById('imageButton');
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
const width = imageButton.width;
const height = imageButton.height;

canvas.width = width;
canvas.height = height;

context.drawImage(imageButton, 0, 0, width, height);

imageButton.onclick = function(e) {
  const alpha = context.getImageData(e.offsetX, e.offsetY, 1, 1).data[3];
  
  switch (alpha) {
    case 255:
      messageBox.innerText = "Inside clicked";
      
      break;
      
    case 0:
      messageBox.innerText = "Outside clicked";
      
      // Here you could do e.preventDefault(); if this is a form submit event or something like that.
      
      break;
      
    default:
      messageBox.innerText = "Border clicked.";
      
      // Decide how to handle clicks in the border or change the switch for an if and define a range of valid and invalid values for the alpha channel.
      
      break;
  }
};

#imageButton {
  box-shadow: inset 0 0 0 1px rgba(255, 0, 0, .5);
  cursor: pointer;
  width: 100px;
}

<img id="imageButton" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" />

<div id="messageBox"></div>

请注意，我使用的是小数据 URI 而不是您的图片，以避免Cross-Origin 问题或大于允许的答案。

【讨论】：

感谢您的回复，javascript 代码 cmets 非常有帮助！我来自 c# 编程背景，正在切换到前端，太棒了！
@Andreww 如果此答案解决了您的问题，如果您能接受/支持它，那就太好了（：

【解决方案2】：

您可能想查看图片地图HTML map Tag

【讨论】：

这适用于简单和静态的用例，但我认为它不是任意形状/图像的正确解决方案，特别是如果它将来可能会发生变化。此外，这不会考虑图像的 alpha 通道，必须手动定义。