Прочитать пиксели изображения - PullRequest
Новая
       30

Прочитать пиксели изображения

3 голосов
/ 24 февраля 2012

Можно ли считывать пиксели изображения на холсте A и создавать пиксели на холсте B?И я хочу создать новые пиксели на холсте B только там, где пиксели изображения зеленые.например.Если пиксель изображения (120,45) имеет зеленый цвет, мне нужно создать пиксель зеленого цвета в Canvas B со значением (120,45)

1 Ответ

5 голосов
/ 24 февраля 2012

Вы можете использовать canvas ImageData , чтобы получить значения цвета для каждого пикселя. Функция: 

context.getImageData(left, top, width, height);

возвращает объект ImageData , который состоит из следующих свойств:

CanvasPixelArray содержит значения RGBA для всех пикселей, начиная с верхнего левого угла и заканчивая правым нижним. Другими словами, это массив, содержащий 4*width*height количество записей.

Используя это, вы можете начать цикл по каждому пикселю (+=4 записей на пиксель) и проверить значения RGBA. Если они соответствуют определенному значению, которое вы хотите, то есть зеленому, то вы скопируете это значение на холст B, который вы создадите, изменив вновь созданный объект ImageData.

Вы можете создать новый пустой объект ImageData с помощью: 

context.createImageData(cssWidth, cssHeight)

Обратите внимание, что вам нужно знать конкретные значения RGBA, которые идентифицируют «зеленый» или определяют конкретные условия, т. Е. Если значение G RGBA равно >= 150, тогда оно «зеленое».

Также обратите внимание, что вы не можете получить ImageData, который был испорчен ресурсами за пределами вашего происхождения. то есть, если вы нарисуете на холсте изображение, которое не является безопасным по отношению к CORS, вы больше не сможете извлечь ImageData с этого холста, так же как вы не можете использовать toDataURL.

...