用Canvas玩图片处理

昨晚玩了一晚上的canvas，主要时间是被一个小问题卡住了，我下面笔记一下。

最近很抓紧地再学html5，之前一直是看，感觉进度很慢，于是决定在这两个月都把很html5全部特性大概Demo一遍。

这次学习笔记是写关于使用canvas来处理图片，记得我一开始知道canvas可以读写图片像素的时候，肾上腺素立刻狂飙。随后，我脑海里立刻闪过很多web应用可以做，例如图片处理应用，今晚和楚越探讨了一下Photoshop里面的一些简易功用canvas实现的可行性。其实，不少童鞋已经实现了类似的应用。

我比较遗憾的是，因为没有图形学的基础，需要用点时间理解和学习一些关于色彩处理的算法。今晚我用了几个自己写的简单的公式稍微尝试了一下效果。

可以点击这里看Demo，兼容性方面，Chrome和Safair完美支持，其他的都有些悲剧。

下面开始笔记吧。

Canvas基础

按MDN的话来说，canvas是一个可以让我们使用脚本绘图的标签，它提供了一系列完整的属性和方法。我们可以借此来实现图形绘制，图像处理甚至实现简单的动画和游戏制作。

canvas标签只有两个属性：width和height，用来设定画布的宽和高，如果没有通过标签属性或者脚本来设置，默认为300*150;

另外，ie8之前版本的ie都不支持canvas，那么我们在实际应用中需要做一些feedback，其实很简单：

1.在canvas标签里面加入提示语句，不支持canvas的会把它显示出来，支持的会无视。

2.在使用canvas相关操作前，判断一下document.getElementById("canvas").getContext方法是否存在，如果存在，即可继续。

Canvas像素处理

这篇文章主要讲的是canvas像素处理，所以用canvas绘图相关方法略过一下。

1.在canvas里插入图片

插入图片的方法只有一个，但是有三个重载方法，具体如下：

context . drawImage (image, dx, dy)

context . drawImage (image, dx, dy, dw, dh)

context . drawImage (image, sx, sy, sw, sh, dx, dy, dw, dh)

下面说一下参数部分，image参数可以是image，canvas，video节点或者对象。而后面几个参数分别是用来裁剪和定位的，下面一个图可以让你很直观地搞清楚各个参数之间的关系。

2.像素操作

终于到了激动人心的时候了，像素操作实际上就是两个操作，一个是读像素信息，另外一个是修改像素。

在介绍读取像素信息方法之前，我们先看一下imageData对象，这个对象就是用来存储像素信息的，里面有三个属性，分别是width，height和data，前面两个顾名思义是用来记录尺寸的，而data属性是一个一维数组，像素信息依次以R，G，B，Alpha记录，可以直接读取和修改。

既然我们知道了如果存储和修改，那么我们继续看看如何获取，下面有几个方法：

imagedata = context.createImageData (sw, sh);//创建一个imageData对象，根据参数指定尺寸，颜色为黑色透明。

imagedata = context.createImageData (imagedata);//根据imagedata参数中的存储创建新的imageData对象，颜色是黑色透明。

imagedata = context.getImageData (sx, sy, sw, sh);//从canvas里的指定位置获取像素信息，主要这个方法没有获取到尺寸信息。

需要注意一下的是，canvas里面的图片如果不是本域下的，有可能会出现安全错误。

通过以上方法我们可以创建imageData对象，可以读取修改，那么这些操作完成之后如何把它插进canvas里面呢？

下面就需要用到最后一个方法：

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

四个可选参数是指定imageData切割区域，如果要完整插入，则不需设置这些参数。但是，必须保证imageData里的尺寸已经设定，否则，浏览器可能会抛出TYPE_MISMATCH_ERR错误。

参考资料

Hi,丸子 这个blog里面几篇关于html5的文章，篇篇美味。

html5研究小组 一个比较热闹的社区。

MDN Canvas Tutorial