Дизайнер одежды. Окраска слоя

Question

Я пытаюсь сделать приложение дизайнера ткани внутри структуры на основе слоев, как в приложении Photoshop. Я использую изображение с альфа-каналом и под ним. Я размещаю div с разными цветами фона. В результате я ожидаю изменения цвета изображения. Но я не знаю, как нанести это изображение другим слоем, используя тот же цвет. Когда я пытаюсь повторить тот же трюк, он заполнит дополнительное пространство, которое я хочу быть прозрачным. Другими словами, мне нужно нарисовать только часть изображения , оставив прозрачную часть.

Я попытался использовать холст для заполнения rgb (255,0,255) частей изображения, но холст слишком медленный.

<div class="preview_under"> 
    <div style="background: transparent url(images/main_template.png);" class="preview_middle"> 
    <div class="preview_over"> 
     <!-- override layers --> 
     <div class="layer" style="background: url(images/blue.jpg);" data-name="modern" data-section="pocket"> 
     <img src="images/pocket_modern.jpg"> 
     </div> 
     <!-- /override layers --> 
    </div> 
    </div> 
    <!-- color of the template --> 
    <div class="fill" style="background: url(images/blue.jpg);"></div> 
</div> 

Графическое представление задачи:

UPD: Спасибо за все! Я решил проблему с помощью холста.
Я пробовал globalCompositeOperation собственности, и он отлично работает. Демо-версия: here.

Answer 1

Спасибо за всех! Я решил проблему с помощью холста.
Я только что использовал globalCompositeOperation.

.. 
ctx.drawImage(original, 0, 0); 
ctx.globalCompositeOperation = "source-in"; 
ctx.drawImage(fill, 0, 0); 
ctx.globalCompositeOperation = "source-over"; 
ctx.drawImage(border, 0, 0); 
... 

Демо-версия: here.

Answer 2

Холст должен быть быстрым, возможно, медлительность связана с используемым алгоритмом.

Но, если вы попытались использовать холст, это означает, что вы ориентируетесь на современные браузеры. Так, вероятно, SVG будет работать :)

Изменение цвета с SVG очень легко (см http://jsfiddle.net/diegof79/kkxP3/):

<svg width="100" height="100"> 
    <circle id="pocket" cx="50" cy="50" r="40" 
      stroke="black" stroke-width="4" fill="yellow" /> 
</svg> 

В JavaScript:

document.getElementById('pocket').style.fill = 'red'; 

Вы можете наложить ткань частей в слое , и используйте такой инструмент, как Inkscape, чтобы нарисовать их (плюс вы можете настроить фоновое изображение на SVG с помощью визуального редактора, так что вам не нужно делать наложение вручную :))

Другие возможные решения:

• Есть предопределенный набор цветов, и PNG с «спрайтов» для каждого изменения, так что вы только изменить фон смещения при каждом изменении цвета. (хорошо: не требует ничего особенного и будет работать со всеми браузерами; плохо: вариации цвета фиксированы, создавая эти спрайты, занимает много времени).

• Используйте холст, чтобы изменить изображение (ищите проблемы в медленном алгоритме). Затем вы можете использовать toDataURL для кэширования изображения, сгенерированного холстом. Таким образом, когда пользователь меняет цвета, вы используете кешированное изображение, если оно уже существует. (Хорошо: вам не нужно редактировать фотографии вручную, плохо: более сложным для кода)

Answer 3

Другое решение, с ограниченной поддержкой браузера, но очень легко осуществить, чтобы установить изображения только цвет, но имеющий возможность использовать изменения насыщенности и яркости.

затем применить

-webkit-filter: hue-rotate(xdeg); 

Чтобы изменить в любой цвет.

Проделав то же самое, но с фильтром SVG, может иметь больше поддержки

a silly demo