jQuery: есть ли способ применить цвет (оттенок) к изображению?

Question

есть способ закрасить (применить оттенок) изображение с помощью jQ или каких-нибудь заглушек? спасибо

Answer 1

Самый простой способ, которым я могу придумать, это наложить полупрозрачный div на изображение.

Небольшой пример:

HTML

<div id="overlay" class="overlay"></div>
<img id="myimg" src="img.jpg" />

CSS

.overlay
    {
    display: block;
    position: absolute;
    background-color: rgba(200, 100, 100, 0.5);
    top: 0px;
    left: 0px;
    width: 0px;
    height: 0px;
    }

JS (с JQuery)

overlay = $("#overlay");
img = $("#myimg");
overlay.width(img.css("width"));
overlay.height(img.css("height"));
overlay.css("top", img.offset().top + "px");
overlay.css("left", img.offset().left + "px");

Answer 2

Как уже упоминалось в Динамически меняющиеся цвета изображения

взгляните на Pixastic (coloradjust)

https://github.com/jseidelin/pixastic

http://www.pixastic.com/lib/docs/actions/coloradjust/

или PaintbrushJS (цветовой оттенок)

https://github.com/mezzoblue/PaintbrushJS

http://mezzoblue.github.com/PaintbrushJS/demo/

Answer 3

Нико ответит отлично, если вам нужен простой оттенок цвета - однако, если вы говорите о ненасыщенности изображения и , тогда примените оттенок (чтобы изображение было только зеленымнапример) тогда вы можете взглянуть на манипуляции с изображениями с помощью <canvas>

После некоторого поиска в Google я нашел эту библиотеку для canvas, которая фокусируется на операциях с фотографиями:

Answer 4

Я не уверен, что вы используете PHP, но это невозможно с JavaScript / jQuery. С помощью PHP вы можете использовать библиотеку изображений GD для тонирования изображения перед его отправкой клиенту. Эта тема должна помочь: -)

Также, эта ветка форума говорит о том, что ImageMagick также подкрашивает изображение.

Мне очень жаль, если вы не / не можете использовать PHP, однако JavaScript не может делать то, что вы хотите.

Джеймс