事实上，你可以直接通过ImageData对象操纵像素数据，直接读取或将数据数组写入该对象中.

一. ImageData对象

ImageData对象中存储着canvas对象真实的像素数据，它包含以下几个只读属性：

• width 图片宽度，单位是像素

• height 图片高度，单位是像素

• data Uint8ClampedArray类型的一维数组，包含着RGBA格式的整型数据，范围在0至255之间（包括255）。

  data属性返回一个 Uint8ClampedArray，它可以被使用作为查看初始像素数据。每个像素用4个1bytes值(按照红，绿，蓝和透明值的顺序; 这就是"RGBA"格式) 来代表。 每个颜色值部份用0至255来代表。 每个部份被分配到一个在数组内连续的索引，左上角像素的红色部份在数组的索引0位置。像素从左到右被处理，然后往下，遍历整个数组。

  包含高度 × 宽度 × 4 bytes数据，索引值从0到(高度×宽度×4)-1

二. 获取ImageDate对象

 var imageData = ctx.getImageData(left, top, width, height);
 // 获取到包含每个像素的信息的数组
 var data = imageDate.date;

案例: 颜色选择器

三. 创建空的ImageDate对象

• 方法1:

    // 创建了一个新的具体特定尺寸的ImageData对象。所有像素被预设为 rgba(0,0,0,0)
    var myImageData = ctx.createImageData(width, height);
  

• 方法2:

    // 创建一个与指定的anotherImageData具有相同像素数量的新的ImageDate
    // 需要注意的是新的ImageDate每个像素仍然是 rgba(0,0,0,0).  并不是复制
    var myImageData = ctx.createImageData(anotherImageData);
  

四. 修改像素数据

ctx.putImageData(myImageData, dx, dy);

案例: 图像颜色的反转, 图像灰度处理, 马赛克

五. 保存为图片

//默认设定。创建一个PNG图片。
canvas.toDataURL('image/png')

// 创建一个JPG图片。你可以有选择地提供从0到1的品质量，1表示最好品质，0基本不被辨析但有比较小的文件大小。
//当你从画布中生成了一个数据链接，例如，你可以将它用于任何<image>元素，或者将它放在一个有download属性的超链接里用于保存到本地。
canvas.toDataURL('image/jpeg', quality)