HTML5-Canvas对图片的操作

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);