Изменение цвета изображения

Question

Мне нужно изменить цвет изображения на сайте. Изображение имеет навес для машины, поэтому текстура и тени должны оставаться неизменными. Если я изменю цвет, просто поменяв изображения другим цветом, у меня будет приблизительно 7500 изображений, и я не думаю, что это будет наиболее эффективный способ сделать это, поэтому я спрашиваю сообщество, есть ли такое код jQuery, который позволил бы мне разместить какой-то цветной фильтр поверх белого навеса для машины и изменить цвет в реальном времени на веб-сайте?

Это образец одного из изображений, с которого я должен начать.

Единственное, что может изменить цвет, - это часть крыши, металлические рельсы на изображении не могут изменить цвет, а фон также не может изменить цвет.

Обновление: я думаю, что было бы легче сделать это, используя flash. Я знаю, что сайты автодилеров также используют flash. Кто-нибудь знает какие-нибудь хорошие учебники для флеш?

Answer 1

Можете ли вы создать «бесцветное» изображение в виде чего-то вроде PNG, который поддерживает прозрачность, а затем имеет цветной div или что-то на заднем плане, которое просвечивает?

Answer 2

Вы также можете использовать php для генерации изображения с помощью функции imagecopymerge .Это позволило бы сэкономить время, установив цветовой фильтр и изображение в URL:

<img src="image.php?img=carport&color=blue" />

Answer 3

Поместите прозрачный div на ваше изображение и измените его фон соответственно.В приведенном ниже примере ссылки я использовал jQuery для изменения цвета при нажатии кнопки.Я использовал несколько свойств прозрачности CSS, чтобы вы получили кросс-браузерное решение.

Свойства непрозрачности для кросс-браузерной совместимости, включая IE6

.opacity{
    -khtml-opacity:.20;
    -moz-opacity:.20;
    -ms-filter:”alpha(opacity=20)”;
    filter:alpha(opacity=20);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.2);
    opacity:.20;
}

jQuery-код, когда кнопка нажата, изменение цвета.

$('#red, #green, #yellow, #blue').click(function(e) {
    var x = e.target.id;
    $('.filter').css({'background': x})
})

Проверьте рабочий пример с http://jsfiddle.net/gVQc3/4/

Answer 4

Данный html-код выглядит следующим образом:

<div id="gallery">
    <img src="http://farm2.static.flickr.com/1157/1054046043_82c48223f1.jpg" />
    <div id="overlay"></div>
</div>
<ul id="colors">
    <li>Red</li>
    <li>Green</li>
</ul>

CSS:

#gallery {
    position: relative;
    display: inline-block;
    margin: 0 auto;
}

#gallery img {
    border: 1px solid #ccc;
    padding: 0.4em;
}

#overlay {
    position: absolute;
    top: 0.5em;
    left: 0.5em;
    right: 0.5em;
    bottom: 0.5em;
    background-color: transparent;
    opacity: 0.4;
}

#colors:before {
    content: "Select a color overlay: ";
}

#colors li {
    display: inline-block;
    margin: 0 0.5em 0 0;
    padding: 0.2em 0.5em;
    border: 1px solid #ccc;
    cursor: pointer;
}

И jQuery:

$('#colors li').hover(
    function(){
        var color = $(this).text();
        $('#overlay').css('background-color',color);
    },
    function(){
        $('#overlay').css('background-color','transparent');
    });

Приводит к следующей скрипте JSпример .