Наложение цвета изображения в HTML5 / JS

Question

У меня есть несколько векторов png с прозрачным фоном, которые я хочу наложить на лету, чтобы пользователи могли выбрать вектор, а затем выбрать, какой цвет ему нужен, из палитры.

Единственное условие - ониНельзя замаскировать фоновыми цветами, так как несколько PNG будут загружены на один и тот же холст и должны будут перекрываться.

Как именно я могу загрузить изображение на холст, а затем наложить его определенным цветом?

Редактировать: Я нашел некоторую информацию здесь и здесь (- ответ Натана), которая работает, но не во всех браузерах.

Второй, особенно потому, что мне нужно наложить только саму png и прозрачность, чтобы она оставалась прозрачной

Answer 1

Практически вы хотите загрузить изображение на холст и наложить его на определенный цвет, который придаст цветовой эффект всему изображению.

Этот плагин jQuery делает именно это, он загружает изображение на холст, манипулирует цветом, давая приятный эффект тонировки, и преобразует его обратно в элемент изображения.Преобразование этого обратно в элемент изображения является очень важной частью, поскольку некоторые пользователи могут стилизовать свою базу CSS на элементе img вместо ID или класса.

Просто поиграйте с интерактивной demo :

и пройдите документы :

Веселитесь.