canvas

canvas2d像素操作

canvas支持直接获取和修改画布中每一个像素点的信息，这些信息全部被存放在ImageData对象中。

一、ImageData对象

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

  • width：图片宽度，单位是像素。
  • height：图片高度，单位是像素。
  • data：图片所有像素点信息，是一个一维数组，元素类型是Uint8ClampedArray。储存像素信息的方式是自图片的左上角开始，从左往右、由上自下依次存入每个像素点的RGBA四个值。这个数组包含高度 × 宽度 × 4 bytes数据，索引值从0到(高度×宽度×4)-1。

二、新建ImageData对象

可以使用ctx.createImageData方法来新建一个所有像素都为rgba(0, 0, 0, 0)的ImageData对象：

1
2
3
4
// 新建具体尺寸的ImageData对象
const ImageData = ctx.createImageData(width, height)
// 新建一个被anotherImageData对象指定的相同像素的ImageData对象，并非复制图片数据
const ImageData2 = ctx.createImageData(anotherImageData)

三、获取图片像素数据

通过ctx.getImageData方法来获取图片的数据：

1
2
// 获取一个以(x, y)为左上角，宽高分别为width和height的矩形的像素数据，如果范围超出了canvas，将会得到rgba(0, 0, 0, 0)
const ImageData = ctx.getImageData(x, y, width, height)

四、写入图片像素数据

可以用putImageData方法去对场景进行像素数据的写入

1
2
// 以(x, y)为左上角在canvas上绘制newImageData
ctx.putImageData(newImageData, x, y)

五、保存图片

canvas对象提供了toDataURL方法来保存当前图片，分辨率是96dpi：

  • canvas.toDataURL('image/png', quality)：可以创建一个png格式的图片，quality代表图片质量，取值从0到1，1最好。
  • canvas.toBlob(callback, type, encoderOptions)：通过canvas创建一个blob对象。

以上两种方法创建的对象都可以用于任何img标签，也可以通过具有download属性的元素来下载（例如在chrome中给a标签设置download属性，这样在点击时就不会跳转页面而是直接下载）。