Как я могу манипулировать пикселями в холсте?

Question

Позвольте мне объяснить, что я хочу достичь ..

я что-то строить просто для удовольствия, и как обучение эксперимент похож на

www.milliondollarhomepage.com

Кроме этого, я хочу использовать холст и/или Fabric.js для достижения того же. Как я могу манипулировать каждым пикселем в холсте?

Сценарий:

• Я хочу предложить 1000 пикселей для захватов.
• Пользователь может выбрать изображение и разместить его на холсте
• Изображение может быть изменено в соответствии с количеством пикселей, которое пользователь хочет и вычитает из общих оставшихся пикселей.

Любая помощь по этому вопросу будет оценена по достоинству!

Answer 1

Метод в холсте API HTML5 для манипулирования отдельных пикселей является

context.getImageData(x,y,width,height); 

, например

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

Это возвращает массивный массив, который содержит в повторяющемся порядке:

[red,green,blue,alpha,red,green,blue,alpha...] 

Каждый номер 4 представляет собой красный, зеленый, синий и альфа-каналы для каждого ingle пикселей на выбранной области, слева направо, сверху вниз.

Значения для каждого из этих чисел являются целыми числами от 0 - 255.

В петле через каждый пиксель и падение их red и blue каналов, таким образом, превращая изображение зеленый, например

//assume map variable from earlier 

for(var i = 0; i < map.data.length; i+=4){ 
    map.data[i] = 0; // drop red to 0 
    map.data[i+2] = 0; // drop blue to 0 
} 
context.putImageData(map,0,0); 

See Example

Обратите внимание, что эта процедура может быть сделано только на сервере, и без изображений из других областей, «загрязняющих» холст. Если эти требования не выполняются, будет выведено исключение DOM ошибки безопасности.