HTML - 透明性

Question

とPNG画像からカスタムクリッカブル形状のボタンを実装、私は透明度以下PNGイメージがあります

を私は使用していますHTML & CSSでボタンを作りたいですalphaチャネルをマスクとして使用するため、ユーザーがピンク領域をクリックした場合にのみ機能します。

これは可能ですか？どのように実装できますか？

Answer 1

あなたはピクセル値を取得し、アルファチャンネル値をチェックするためにcanvasにあなたのイメージを描画する必要がHTML map Tag

Answer 2

イメージマップをチェックアウトする場合があります：

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>

注Cross-Originの問題や許可されている以上の回答を避けるために、画像の代わりに小さなデータURIを使用しています。