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

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

3 голосов
/ 02 февраля 2011

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

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

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

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

Ответы [ 2 ]

1 голос
/ 02 февраля 2011

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

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

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

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

0 голосов
/ 02 февраля 2011

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

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

...