HTML5-Canvas对图片的操作

转自：http://www.cnblogs.com/uuuuuu/archive/2013/03/12/2956135.html

Canvas图片API非常强大，有两个最基础的方法，一是展示图片，二是像素级的修改图片后再把它打印到画布上。

1、通过drawImage()将图片显示在画布上
var img = new Image();
img.src = '';

img.onload = function(){
ctx.drawImage(img,0,0)
}

2、截取图片的一部分到画布上

//(sx , sy )开始位置
//(sw , sh )目标大小（缩放）
//(dx , dy )截取开始位置
//(dw , dh )截取大小

function drawImage(Image , sx , sy , sw , sh , dx , dy , dw , dh){
//code...

}
//看第四个缩放和平移图片的例子就会发现这个函数的强大之处
3、旋转图片

/*
1、将当前的画布背景保存起来，context.save()
2、重置变换矩阵,context.setTransform(1,0,0,1,0,0);
3、编码转换角度的算法,angle = 90 * Math.PI / 180;使用PI单位
context.translate(x,y),因为旋转的整个画布对象
4、context.drawImage

*/
function rotate() {
ctx.save();
ctx.setTransform(1,0,0,1,0,0);
ctx.translate(0,0)
var angle = 90 * Math.PI / 180;
ctx.rotate(angle);
ctx.drawImage(img1,10,30);
ctx.restore();
}

4、缩放和平移一张图片
强大drawImage()方法可以完成一切需求
看这个测试demo：
http://beyeah.sinaapp.com/canvas/zoom-pan.html

5、像素处理

imagedata = context.createImageData(sw, sh)
// 创建一个100x100的区域来存储像素信息
imagedata = context.createImageData(imagedata)
// like copy
imagedata = context.createImageData()
// 创建一个空的图像实例

ImageData 对象带有三个属性
imagedata.width,
imagedata.height,
imagedata.data:存储着图片像素数据的数组,每四个数分别代表一个像素点的R，G，B，alpha透明度值

获取图像数据：
imagedata = context.getImageData(sx,sy,sw,sh);
四个参数定义位置和大小的矩形并从画布上复制到imagedata实例中

将图像数据打印到画布上：

context.putImageData(imagedata,dx,dy)
context.putImageData(imagedata,dx,dy [,dirtyX,dirtyY,dirtyWidth,dirtyHeight])

修改像素信息：

/*
* 对像素的透明属性进行修改时，值范围是0~255(许多地方此值的范围是0-1)
*
*/
for(var j=3;j<imageData.data.length;j+=4){
imageData.data[j] = 128;
}

---
出于安全考虑，只能操作来自同域下的图片资源。而在本地测试时，大部分浏览器会认为来自本地的图片是来自另外一个域。
所以测试时，需要搭建一个web服务器

6、将一个canvas对象复制至另一个canvas对象中
thecanvas = d.getElementById('canvas')
context.drawImage(thecanvas,0,0);