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

Question

Я строию онлайн-инструмент, где человек может «построить свой велосипед», выбрав цвета для различных частей (рамка, вилка, сиденье и т. Д.). Я начинаю с чистого изображения JPG на велосипеде с белой рамкой и черными компонентами. Что я ищу немного о том, какой технический путь нужно предпринять. Возможны следующие варианты:

• PNG с альфа-прозрачностью, размещать фоновые изображения по различным регионам.
• конвертировать мой JPG в SVG и выполнять преобразование цвета с библиотекой JS
• Использование Рафаэль-JS рисовать поверх изображения на

Я сделал свой самый обширный тестирование с Рафаэлем, но я не вполне понятно, как все это может объединиться. Добрый человек в своем списке рассылки дал очень хорошее доказательство концепции (see here), но полученный код привязан к аякс-вызовам на своем сервере, чтобы отобразить результат, поэтому я не могу воспроизвести результат локально.

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

Answer 1

Другой вариант - холст HTML 5. Все браузеры, за исключением Internet Explorer, поддерживают его (IE 9 также поддерживает его). С тегом canvas вы можете делать собственные пиксельные операции на изображении.

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

Если вы не знаете, холст тег, то вы можете найти хороший учебник здесь:

https://developer.mozilla.org/en/canvas_tutorial

Answer 2

Мой первый наклон будет идти с SVG, вероятно, с помощью Рафаила (который использует SVG). Если это можно заставить работать, библиотека более высокого уровня, которая уже делает то, что вы хотите, должна сэкономить вам значительное время на перетасовку изображения более низкого уровня. Надеюсь, вы можете принять данное доказательство концепции и изменить элементы, зависящие от ajax, правильно?

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