Преобразование цвета изображения без изменения его прозрачного фона

Есть ли у кого-нибудь хорошее решение для изменения цвета непрозрачной области с помощью HTML5 или Canvas (или любой другой технологии HTML5).

Я много искал и нашел какое-то решение (с Canvas), которое может изменить цвет изображения, например

Как изменить изображение с помощью холста HTML5?

Canvas - Изменение цвета изображения с помощью HTML5/CSS/JS?

Но это решение также изменяет прозрачный фон на заданный цвет (, который я не хочу).

Stackoverflow image with transparent pixel(background)

Свойство png изображения stackoverflow с прозрачным фоном. Теперь я хочу изменить цвет изображения, не затрагивая его прозрачные пиксели (фон), так что я могу снова сохранить изображение с помощью метода canvas toDataURL с новым цветом.

Я не уверен, возможно ли это с HTML5 или нет. Любая помощь приветствуется.

Спасибо в Advance.

******************* EDITED *********************

Добавлено новое изображение пилюли (капсула).

enter image description here

ОТВЕТЫ

Ответ 1

Демонстрация (см. примечание об этом демо ниже): http://jsfiddle.net/m1erickson/2d7ZN/

enter image description here

Вы можете получить массив, содержащий пиксельные данные изображения RGBA, используя context.getImageData

var imageData=context.getImageData(0,0,canvas.width,canvas.height);

var data=imageData.data;

Оттуда вы можете читать (и необязательно менять) цвет каждого пикселя.

Массив rgba выложен следующим образом:

// top-left pixel (x:0,y:0)

data[0]   red of pixel#0 (0-255)
data[1]   green of pixel#0 (0-255)
data[2]   blue of pixel#0 (0-255)
data[3]   alpha of pixel#0 (opacity: 0-255)

// next pixel (x:1,y:0)

data[4]   red of pixel#1
data[5]   green of pixel#1
data[6]   blue of pixel#1
data[7]   alpha of pixel#1

Вы можете изменить компонент R, G, B или любого пикселя, изменив массив данных

Например, это изменяет верхний левый пиксель на сплошной красный

data[0]=255;   // red
data[1]=0;     // green
data[2]=0;     // blue
data[3]=255;   // alpha (opacity)

О прозрачности:

Альфа-компонент каждого пикселя определяет прозрачность пикселей. Если вы хотите изменить только непрозрачные пиксели, вы можете легко игнорировать все полупрозрачные пиксели, например:

// alpha is 0-255
// ignore pixels with alpha < 200 (ignore all pixels that are mostly semi-transparent)

if( data[3]<200 ) { // don't process this pixel }

Наконец, вы можете подтолкнуть измененные пиксели к холсту с помощью .putImageData

context.putImageData(imageData,0,0);

Примечание о демонстрации

Сложно "перекрасить" изображение, используя цветовую схему RGBA по умолчанию для холста.

Итак, эта демоверсия преобразует данные RGB в цветовую схему HSL. Это позволяет изменить "цвет" (оттенок), не затрагивая другие компоненты пикселя (S = насыщенность цвета, L = яркость цвета).

После того, как пиксель будет перекрашен, эти измененные данные HSL преобразуются обратно в RGBA и сохраняются в массиве данных.