canvas hue-rotate

[fireballpro100]

Ребят, появилась такая потребность: запихать в canvas картинку с "поворотом цвета". для этого существует специальный встроенный фильтр:

ctx.filter = "hue-rotate(100deg)";

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


Была мысль, наложить фильтры в css до canvas:

#image{
filter: hue-rotate(100deg);
-moz-filter: hue-rotate(100deg);
-o-filter: hue-rotate(100deg);
-ms-filter: hue-rotate(100deg);
-webkit-filter: hue-rotate(100deg);
}

Не сработало)


Порылся в инете,чтобы еще найти какое-нибудь решение: пишут, вроде как, надо с помощью js и canvas считать изображение по пикселям и на каждый пиксель уже наложить фильтр... Мне подобное пока не по силам; думал, может есть фреймворк, который выполнит подобную работу. Да, такие фреймворки есть, но их механизм я не осилил - это раз; уж очень они тяжелые, по-мойму, для такой задачи - это два.

Была у меня ещё идея - зарендорить картинку в canvas - не получилось, кусок кода-текста - запросто, а вот картинку - нИзя)


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

[Яростный Меч]

найди на гитхабе что-нибудь по словам "canvas filters", там помимо прочего обязательно такое будет. Это же простейший попиксельный фильтр.

[warren buffet]

Доступ к пикселям там легкий и простой. Поворот hue это не фильтр, а настройка, ну, в терминах svg фильтр, а вообще, в ТВ и компах и обработке изображений - настройка. По какой формуле переписывают значения из канала в канал я точно не знаю, но точно знаю, что hue это очень простая фича, не требующая сложных вычислений, скорее всего арифметика. Например если поменять значения R и G, это будет hue под углом 90 скажем. Тебе зачем это вообще надо?

зарендорить картинку в canvas - не получилось

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

[fireballpro100]

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

На свой сайт-рисовалку хочу запилить эту штуковину. Рисовалка само собой, работает на canvas и красит не цветами, а текстурами. Причём, текстуры тяжёлые... И мне просто пришла в голову мысль, что hue-rotate - это именно то что нужно, чтобы изменить цвет текстур не грузя лишние картинки. Был еще вариант, сделать текстуры полупрозрачными, и подложить под них цвета (по-мойму, фреймворк fabricjs умеет даже делать это), но мне оно не очень понравилось)

[warren buffet]

Ты поздно родился. В мое время была программа Autodesc Animator с файлами типа .cel, палитру которых можно было крутить во фреймах, то есть получать из одного спрайта фактически сотню разных. .cel от celluloid, то есть целлулоид на котором рисовали настоящие аниматоры. Так вот обычный gif - такой же целлулоидный с той лишь разницей, что хрена лысого его палитру сдвинешь, даже в дизайн-тайм. Я когда узнал, что на вебе gif не такой как в Аниматоре, разочарованию не было предела. Идиотизм блин.

Короче, тебе прямая дорога переписывать пиксели если фильтр не работает, а он судя по таблице поддержки не работает еще. Формулу найдешь http://stackoverflow.com/questions/2...t-hue-from-rgb

[warren buffet]

Скорректирую. На самом деле палитра индексных файлов крутится, поскольку индексы сами крутить бессмысленно. Если в ФШ открыть гифку и вызвать Hue/Saturation, апликуха начнет крутить RGB в палитре, других цветов у нее все равно нету. Но крутится-то как, на генеральном HUE, а не специфически для индекса. Если добраться до этой палитры, то есть распарсить gif, ты можешь наделать из одно сотню немыслимых вариантов просто заменяя 256 RGB цветов на другие.

Зацени, я нашел этот old school метод http://www.effectgames.com/effect/ar...ith_HTML5.html на канвасе. Там есть демки и сырец. Разбирайся.

[fireballpro100]

Скорректирую. На самом деле палитра индексных файлов крутится, поскольку индексы сами крутить бессмысленно. Если в ФШ открыть гифку и вызвать Hue/Saturation, апликуха начнет крутить RGB в палитре, других цветов у нее все равно нету. Но крутится-то как, на генеральном HUE, а не специфически для индекса. Если добраться до этой палитры, то есть распарсить gif, ты можешь наделать из одно сотню немыслимых вариантов просто заменяя 256 RGB цветов на другие.

Зацени, я нашел этот old school метод http://www.effectgames.com/effect/ar...ith_HTML5.html на канвасе. Там есть демки и сырец. Разбирайся.

warren buffet, я написал, что у меня тяжелые текстуры и видимо, вы сделали вывод, что я использую gif-ки. На самом деле у меня png, есть необходимость использовать этот формат, по-скольку, картинка не прямоугольной формы, а белый фон - непростителен) В любом случае, спасибо за ваши труды)

Нашёл на гитхабе js скрипт, который меня устраивает, поставил: вроде работает, как надо. Даже на моем древнем-древнем дефолтном браузере на "ведроиде" всё работает как надо)

Единственная сложность заключалась в том, что в опере с дом. комп-а скрипт не работал почему-то, но когда я залил в инет - всё работало.

Скрипт взял отсюда: https://github.com/arahaya/ImageFilters.js

Залью свой пример, мало ли, вдруг кому-то пригодится:

<html>
	<head>
		<script type="text/javascript" src="imagefilters.js"></script>
		<script type="text/javascript">
		  
		  //Инициализация канвас
			var canvas,ctx,w,h;
			var img;
			function init(){
				canvas = document.getElementById("canvas");
				canvas.width = 572;
				canvas.height = 600;
				w = canvas.width;
				h = canvas.height;
				ctx = canvas.getContext('2d');
				ctx.strokeRect(0,0,w,h);
				
				

				//Отрисовка фонового изображения
				img = document.getElementById("image");
				ctx.drawImage(img,0,0);
				
				// create an ImageData for the area you want to apply the filter.
				  var imageData = ctx.getImageData(0, 0, 572, 600);

				  // pass it to a filter and get the modified copy
				  var filtered = ImageFilters.HSLAdjustment(imageData, 280, 0, 0);

				  // put it back into a context to view the results
				  ctx.putImageData(filtered, 0, 0);
			}
		</script>
	</head>
	<body onload="init();">
		<img src="1.jpg" id="image" />
		<canvas id="canvas"></canvas>
	</body>
</html>

Благодарю за "пинки"))

[warren buffet]

вы сделали вывод

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

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

В прошлом индексный цвет появился как отражение тогдашней технологии цветопередачи дисплеев, которая тащемта реализуется до сих пор через Video Lookup Table, но теперь эта таблица может включать в себя весь диапазон, а в прошлом там было максимум 256 цветов. Эта самая палитра из гифки и загружалась в VLUT и юзер видел подобранные именно для этой картинки цвета и она выглядела офигинительно, народу нравилось. Затем дивайсы разжирели и попер полный фарш в 16 миллионов с профилями и прочей тряхомудией, но ФШ кажись до сих пор крутит все эти HUE через арифметику не прибегая к Lab.

Кстати, превью любой настройки в ФШ знаешь что делает? Заменяет в регионе содержание VLUT. То есть с реальными пикселами никакой работы не ведется пока юзер не нажмет кнопку ОК в диалоге настройки. То есть работа с палитрами актуальна до сих пор, поскольку реально экономит и ускоряет охеренно.

Но почему про поллитры забыли на вебе - я не знаю. Видимо поколение дизайнеров такое было, бестолковое. )))

[warren buffet]

Перцептуально подобранная палитра из 256 цветов делает индексную картинку неотличимой от полноцветной, а если увеличить количество цветов раза в 4, до 1024 скажем, то вообще никто разницы не заметит, но зато работа с оттенком, цветом и яркостью будет включать только эти 1024 пиксела. Хоть там 5000 на 5000 - в оперативной обработке всегда 1024, и рендерить там особо нечего - кидай RGB по адресам и все. А если передавать палитру в LUT, то рендером будет заниматься хард, а не софт.

С другой стороны наращивание вычислительных мощностей это хорошо, так что помер индексный цвет и RIP с ним.

ЗЫ В период ограниченных ресурсов были даже такие фишки как image data pyramid в формате tiff и более того, большой тиф можно было открыть фрагментом, чтобы комп не сдох пердя винтом. )))