Изменение цвета плоского изображения с помощью jQuery

Question

У меня плоское белое круглое изображение (как на серьезно плоском #ffffff изображении). Есть ли способ изменить его цвет в контексте HTML-страницы (предположим, PNG, поэтому мы работаем с растром RGBA)?

В моей среде используется jQuery, поэтому я склонен думать в рамках мышления jQuery, но если что-то еще делает это возможным, я бы тоже хотел об этом услышать.

Я не очень хорошо разбираюсь в возможностях Canvas, но, возможно, это может сделать что-то подобное. Что касается поддержки браузера, тем не менее, я был бы очень признателен, если бы решение поддерживало базу с IE6 (да, я знаю, что оно мертво, но потерпите меня на этом).

Answer 1

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

<div class="circle"/>

.circle{
    background:blue;
    border: 1px solid red;
    border-radius: 50px 50px 50px 50px;
    height: 100px;
    width: 100px;
}

Затем измените цвет фона соответственно.

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

Answer 2

Закончилось использование холста в конце концов. Отказ от идеи изображения и просто рисование кругов с использованием canvas (и jCanvas , чтобы сделать его модульным с окружением jQuery). По сути, мы рассматриваем сам тег <canvas> как эквивалент <img> и, возможно, работаем с его динамическим созданием по мере необходимости.

Чтобы заставить его работать с браузерами до IE9 (где поддержка HTML5 отсутствует), есть замечательная библиотека под названием ExplorerCanvas , которая предоставляет функциональность canvas для браузеров до IE9 (это, безусловно, работает с режимом причуд IE7 на IE9 по крайней мере).

Ожидается снижение производительности, если вы собираетесь выполнять анимацию холста в ExplorerCanvas, но, поскольку это всего лишь 2D-статика, это не должно быть слишком большой проблемой.

Существует также проблема , связанная с динамическими <canvas> элементами с помощью ExplorerCanvas , но это легко исправить.

Answer 3

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

http://www.html5canvastutorials.com/tutorials/html5-canvas-circles/