canvas绘制图像、使用图像数据遇到的坑、一个简易灰阶过滤器

0.绘制图像

drwaImage()方法

如果想把一幅图像绘制到画布上，可以使用drawImage()方法。

简单的把图片绘制在画布的某处：三个参数

• 传入一个HTML的img元素并调用它
• 绘制该图像的起点x坐标
• 绘制该图像的起点y坐标

var drawing = document.getElementById("drawing");
if(drawing.getContext){
var context = drawing.getContext("2d");
var image = document.getElementById("aPicture");

image.onload = function () { //这句话是必须的！！！不然就不会有图片出现在画布上

context.drawImage(image,0,0);
}
}

想要改变绘制后图像的大小：多加两个参数

• 目标宽度
• 目标高度

context.drawImage(image,0,0,20,20);

想要把图像中的某个区域绘制到上下文中：9个参数

• 传入一个HTML的img元素并调用它
• 源图像的起点x坐标
• 源图像的起点y坐标
• 源图像的宽度
• 源图像的高度
• 目标图像的x坐标
• 目标图像的y坐标
• 目标图像的宽度
• 目标图像的高度

context.drawImage(image,0,0,20,20,10,10,10,10);

1.使用图像数据

getImageData()

可以使用getImageDate()取得原始图像数据，这个方法有4个参数

• 要取得其数据的画面区域的x坐标
• 要取得其数据的画面区域的y坐标
• 该区域的像素宽度
• 该区域的像素高度

var imageData = context.getImageData(10,5,50,50);

返回的对象是ImageData的实例，每个实例有三个属性

• width
• height
• data

其中data属性是一个数组，保存着每一个像素的数据，在data数组中，每一个像素用4个元素来保存，分别是：

• 红
• 绿
• 蓝
• 透明度值

因此，第一个像素的数据就保存在数组的第0到第3个元素中

2.一个简单的灰阶过滤器

var drawing = document.getElementById("drawing");
if(drawing.getContext){
var context = drawing.getContext("2d");
var image = document.getElementById("aPicture");
image.onload = function () { //这句话是必须的！！！不然就不会有图片出现在画布上
context.drawImage(image,0,0);

imageData = context.getImageData(0,0,image.width,image.height);//亲测chrome浏览器必须在服务器状态下才会运行，在本地会报错

data = imageData.data;
for (i=0;i<data.length;i+=4 ){
red = data[i];
green = data[i+1];
blue = data[i+2];
alpha = data[i+3];
average = Math.floor((red+green+blue)/3);
data[i] = average;
data[i+1] = average;
data[i+2] = average;
}
imageData.data = data;
context.putImageData(imageData,0,0)
}
}

效果图点这里！