HTML - Реализация кнопки с настраиваемой кликабельной формой из изображения PNG с прозрачностью

Question

У меня есть следующее PNG изображение с прозрачностью:

Я хотел бы сделать кнопку в HTML & CSS который использует alpha канал в качестве маски, так что он работает, только если пользователи щелкают в розовой области.

Это возможно? Как это можно реализовать?

Answer 1

Возможно, вы захотите проверить HTML-тег изображения карты

Answer 2

Вы должны нарисовать свое изображение в canvas чтобы получить значения пикселей и проверить значение альфа-канала:

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 вопросы или ответ больше допустимого.