Изменения цвета картинки
 

Доброго времени суток. Столкнулся с одной задачей, к которой не понимаю как подобраться, если есть тут специалисты, хотя бы наведите на правильный путь. Итак, вот суть дела:
Пользователь загружает картинку на сайт, которая состоит из двух, максимум из трёх цветов. На странице должна присутствовать возможность выбора цвета, в качестве такого выбора решил взять jPicker. Таким образом, при выборе цвета в jPicker, на рисунке должен соответственно меняться цвет... как вот это всё можно объединить? или хотя бы скажите, кто сталкивался с jPicker`ом, после выбора цвета куда выдаётся результат выбранного цвета (может храниться в какой-нибудь переменной или ещё-что-нибудь)?

что-то мне подсказывает что автор этого поста тоже вы

ну тады пожалуйста подскажите, какой функцией можно заменить один цвет на другой? Такое вообще на javascript возможно?

Мне не нужно менять бэкгроунд, мне нужно вычислить из каких-цветов состоит картинка и заменить в неё определённый цвет...

Ну допустим заменили, а дальше вы что с этой картинкой с изменённым цветом собираетесь делать?

может не допустим, а всё таки подскажем как это сделать? Если кто-то шарит в яавскрипте и jquery то объясните хотя бы принцип как это сделать. Мне не надо советов и лишних фраз типа: зачем вам это, или допустим заменили.... всё просто, вы либо знаете как сделать либо нет.... если знаете, то подскажите, нет, ну и не надо писать ненужные посты

чтобы понятней было что мне надо, то вот http://www.french-dezign.ru/arbre-feuilles-p-880.html
Примерно что-то подобное...

Я думал на сайте javascript.ru сидят люди, которые знают этот самы явасркипт.... ан нет.... какой смысл в форуме...?

Как минимум в его наличии... ;)

Какой смысл этого наличия? =)

stieve, это уже второй вопрос.
Ответа на него ты например не видишь... Хотя тебе про это писали. И не раз... ;) И он вроде как очевиден... :)

Ни одного ответа по теме... профессора блин...=)

stieve,
Вы бы еще завалились в байкерский бар и потребовали Вам без лишних слов поменять глушитель на байке. А как же, зачем же еще нужны коммюнити?

Кроссбраузерно то, что Вы хотите, в общем случае сделать на яваскрипте нельзя. Некроссбраузерно — <canvas>. Но и это очень тормозной способ.

stieve, ты слеп. :) Не видишь очевидных вещей...

на том примере что вы привели, все сделано на флеше, но на JS тоже можно, для этого нужно выбрать метод рисования фигуры (canvas, svg+vml или raphael), затем сделать цветовую палитру, а дальше задавать фигуре выбранный цвет.

професоср, не флудите, ничего не знаете, так хоть не мешайте...

Тебе оно конечно видней... :lol:

так вот проблема в том, что мне рисовать то ничгео не надо... вот представь, что рисунок уже есть, вот как на том примере... иначе говоря, как сделать тоже самое что и там, только без флэша? и вот скажите: лучше не биться головой и всё таки сделать именно с флэшем? А если всё же возможно обойтись без него, то как? Можно вообще на яваскрипте вычислить кол-во цветов на картинке и их hax значение? Если можно, то как их заменять например пользуюясь данным вбора из Jpicker`а? Мне не надо расписывать и приводить скрипты, вы просто скажите, можно это или нет и есть ли смысл? а ели можно, то посоветуйте чё читать,я уж там дальше сам... вот уже лучше, сказали что-то про canvas, щас буду изучть с чем его едят...

не путайте растровое изображение с векторным, в приведенном примере, есть векторная фигура (не растровая картинка), к которой применяется цвет. Если делать тоже самое то лично я бы на JS делал

Так вам на сервер надо картинку отдавать и там уже с ней что-то делать.
А не с помощью JS.
Это будет самый простой путь.

monolithed,
вот смотри. Есть первый вариант как это делать...
всё впринципе просто, если использовать js и php backend`ом. Иначе говоря на Ajax. То есть цвета на картинке меняет рнр скрипт, получая в качестве параметра от JS код цвета. Это насколько я понимаю подходит и для растрового изображения и для векторного (хотя я не осбо понимаю в чём там разница, ведь заменять цветные пиксели мне кажется проще...)
а есть ли второй вариант, без применения Ajax`а? Если допустим изображение растровое... как мне при загрузке вычислять кол-во цветов? и как их менять? canvas насколько я понял, слишком громоздок и кросбраузерностью там не пахнет.... Намекни в какие степи JS лезть пожалуйста, или хотя бы скажи мне принцип пошагово.

Еще раз на пальцах объясняю, чтобы изменить цвета в растровом изображении, нужно сначала описать фигуру, т.е. воспользоваться к примеру html элементом area для получения координат (можно это сделать с помощью фотошопа, затеем сохранить как html). Ну а потом уже делать заливку с помощью JS

monolithed, понял. Вопрос другой, изначальная картинка мне не ивестна. Я не знаю что там на ней нарисовано, я только знаю, что на ней белый фон и какое-то изображение в однотонном цвете, то есть мне этот однотонный цвет и надо менять... я же программно могу вычислить координаты этой фигуры, или, например, нескольких фигур на изображении? У меня видишь нет ориентирования по координатам изначально, есть только данные о том, что кроме белого цвета, есть какой-то ещё... какой неизвестно, но его надо менять

В этом случае поможет только инвертирование цвета, для этого нужно выбрать цвет, найти область замещения (по цветовой палитре) и выполнить замещение цвет. Для этого в PHP есть библиотека GD.

что-то типа такого (урезано в 10 раз)

<?php 
header("Content-type: image/png");
$image = imageCreateFromPng("image.png");
imagecolorresolve($image, 255, 255, 0);//ищем запрошенный цвет
$color = imageColorAllocate($image, 255, 255, 0);
imagepng ($color);
?>

да php то я отлично знаю, на нём я знаю как делать... а с флэшем ты помочь не сможешь, если допустим всё сделать векторным? :-?

Ну на php инвертирование проще делать, хотя в чем проблема сделать так:

Я не преподаю курсы по флешу

хочешь найти найти подмешку в граф изображении? скриптом не сделаешь-не определяет он цвет точки. тебе нужен с++ или делфи или бейсик или паскаль или асемблер или..... вобщем практически всё кроме скрипта

dmitriymar, или всё таки долбаный флэш? :(

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

BitmapData.getPixel (x,y);

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

monolithed я имел в виду явускрипт у какой средств для определения цвета точки нет

dmitriymar, смотри, нужно примерно вот это: http://www.french-dezign.ru/amour-p-912.html
однако моё понимание как это делается отсутствует. Вроде берётся пнг файл с прозрачным фоном, как его дальше вращать чтобы добиться того как в примере не понятно... видимо он как-то импортируется во флэш, который в свою очередь вставляется не без помощи яваскриптовских файлов... как вот это всё осуществить не понимаю... да, проще всего когда знаешь в каком цвете сделан рисунок и изменять этот цвет на рнр при помощи аякса... но это уже другой вариант... а как всё таки сделать как на примере...скажите мне уже что проще плюнуть, чтобы плюнул и успокоился =)

это просто очень то что ты хочеш-под изображение с прозрачным фоном подложи слой(можеш просто поместить изображение в контейнер див и под него подложи другой контейнер) и меняй бекграудколор в нижнем контейнере-явыскрипт для этого более чем и флеш не нужен вообще для этого

monolithed-есть маленький вопроос личный к Вам по экшенскрипту-если возможно через личку. моя почта dmitrij-provatorov@yandex.ru

dmitriymar, то есть ты предлагаешь именно фигуру, цвет которой мы меняем сделать прозрачной и менять фон подложки, меняя таким образом и цвет фигуры... а если фигура состоит из двух цветов? )

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

я имею ввиду что фигура состоит из двух цветов, фон меня вообще не интересует. Так вот в том и вопрос... как яваскрипт подключается и работает я знаю.. акшинскрипт как? monolithed, можешь мне всё вот это подтвердить, как знающий, чтобы я щас зря не копался...

то есть насколько я понял, через экшинскрипт я могу разобрать пнг-изображение по цветам, т.е. вычислить сколько цветов у меня есть и какие они... и дальше при помощи всё того же экшинскрипта менять цвет с одного на другой. Так?
на всех сайтах где есть вот такая вот хрень вставлено нечто подобное:
<object classid="clsid: D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="500" height="320">
<param name="movie" value="flash/colors.swf?m=1" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="flash/colors.swf?m=1" width="500" height="320" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed>
</object>
это из какой оперы? я так понимаю что дело уже не только в парочке скриптов на экшинскрипт...

экшенскрипт язык програмирования для флеш все действия производятся в флеш файле.и то что выслал-это грубо говоря подключение модуля для работы с флеш

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

Вчитайтесь внимательно:

Также это можно сделать и без координат вообще как сказал dmitriymar и не только с одним цветом, для этого нужно создать заранее несколько изображений с нужными областями и расположить их с помощью свойства z-index друг-над-другом

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