Маска для изображения с помощью HTML5

Небольшая демонстрация на GitHub, показывающая, как можно добавить маску на изображение с помощью HTML5.

Все, что вам нужно сделать, это добавить скрипт canvasmask.js (скачайте его по ссылке ниже) и добавить класс mask к каждому изображению, которому хотите задать маску. Кроме того, необходимо указать пут PNG-файла маски для аттрибита data-mask. Например:

<img src="red-panda.jpg"

alt="Red panda"

class="mask"

data-mask="centerblur.png">

В этом примере картинка centerblur.png это маска для файла red-panda.jpg — принцип прост: берется альфа пиксель от маски и заменяется на альфа пиксель от оригинальной картинки.

Смотрите, как это работает: