createImageData(width, height)：在内存中创建一个指定大小的 ImageData 对象（即像素数组），对象中的像素点都是黑色透明的，即rgba(0,0,0,0)
getImageData(x, y, width, height)：返回一个 ImageData 对象，这个 IamgeData 对象中包含了指定区域的像素数组
putImageData(data, x, y)：将 ImageData 对象绘制到屏幕的指定区域上
三、一个简单的图像处理例子
上面说了这么多，我们用了解的知识来玩玩图像编程，或许有一天我们就要在 Chrome 中玩 PhotoShop 了。
程序大概是这个样子的：
1、将一幅图片绘制到一个 canvas 元素上，为了不引发安全错误(Security_ERR:DOM EXCEPTION 18)，我用的是我博客顶部的横幅背景图片。你要运行这个例子，可能需要改成自己的图片
2、有四个滑动条，分别代表 GRBA 四个分量
3、拖动滑动条，图像中对应的颜色分量就会增加或者减少
4、如果图像变成透明，就会显示 canvas 元素的背景，我把这个背景设置成了我的头像，呵呵。
思路：其实就是用 getImageData 方法，将你想改变的那一块区域的像素数组取出来，然后根据你拖动的滑动条和滑动条的数值，来更改那一块区域里所有像素对应颜色分量的值。处理完毕后再用 putImageData 方法绘制到画布上，就是这么简单。
下面是代码：
简单的图像处理
<canvas id=”test1″ width=”507″ height=”348″ style=”background-image:url(http://images.cnblogs.com/cnblogs_com/myqiao/262115/r_2204793492575248335.jpg)”>你的浏览器不支持 <canvas>标签，请使用 Chrome 浏览器 或者 FireFox 浏览器</canvas>
红色：<input type=”range” min=”1″ max=”100″ onchange=”colorChange(event,0)”/>
绿色：<input type=”range” min=”1″ max=”100″ onchange=”colorChange(event,1)”/>
蓝色：<input type=”range” min=”1″ max=”100″ onchange=”colorChange(event,2)”/>
透明：<input type=”range” min=”1″ max=”100″ onchange=”colorChange(event,3)”/>
<script type=”text/javascript”>
//获取上下文对象
var canvas = document.getElementById(“test1”);
var ctx = canvas.getContext(“2d”);
//画布的宽度和长度
var width = parseInt(canvas.getAttribute(“width”));
var height = parseInt(canvas.getAttribute(“height”));
//装入图像
var image = new Image();
image.onload =imageLoaded;
//顶部背景图片
image.src = “/skins/Valentine/images/banner2.gif”;
