Question

如何使用Canvas处理图像

Answer 1

1、获取canvas调用
var c = document.createElement（‘canvas’）；
context = c.getContext（‘2d’）；
2、获取导入图像信息
var hiddenImage = new Image（）；
hiddenImage.src=图片地址
context .drawImage（hiddenImage, 0, 0, width, height）；
hiddenImage .onload=function（）{
context.putImageData（hiddenImage, 0, 0）；
}
3、获取图片的像素信息
var imageData = context.getImageData（0, 0, w, h）；
//注意这个获取的是数组，注意每1个像素由数组的4个元素组成，四个元素分别代码四个通道r/g/b/a的值
for（var j=0;j<hiddenImage.height;j+=1）{
for（var i=0;i<hiddenImage.width;i+=1）{
//注意这里获取图片信息后可以进行定制化处理
offset=4*（hiddenImage.width*j+i）；
var red = sourceImageData[offset];
var green = sourceImageData[offset + 1];
var blue = sourceImageData[offset + 2];
var brightness = getBrightness（red,green,b