Карта изображения по альфа-каналу

<img src="circle.png" onclick="alert('clicked')"/>

Давайте представим, что circle.png представляет собой прозрачное фоновое изображение размером 400x400 пикселей с кругом посередине.

То, что я получил сейчас, это то, что вся область изображения (400x400px) кликабельна. Я бы хотел, чтобы только круг (непрозрачные пиксели) можно было щелкнуть.

Конечно, я знаю, что в этом примере я мог бы использовать тег и круглую область, но я ищу общее решение, которое будет учитывать фактическую прозрачность изображения и работать для любые изображения (т.е. неправильные формы).

Самый сложный способ, который я видел, — это трассировка контура изображения на основе альфа-канала каждого пикселя, преобразование в путь (возможно, упрощение) и применение в качестве карты.

Есть ли более эффективный/простой способ сделать это?

6
задан Chris Baker 27 June 2012 в 14:53
поделиться