背景介绍
ImageData 是canvas的图像数据，由ImageData() 构造函数返回一个实例化的对象， 三个可读属性
data：一个 Uint8ClampedArray 类型的一维数组，包含RGBA 顺序的数据，每4个元素表示一个RGBA 值即对应一个像素, 左上角在数组的索引0位置，像素从左到右被处理，然后往下，遍历整个数组
RGBA： R - 红色（0-255）、G - 绿色（0-255）、B - 蓝色（0-255）、A - alpha 通道（0-255; 0 是透明的，255 是完全可见的）
Uint8ClampedArray（8位无符号整型固定数组）： 类型化数组表示一个由值固定在0-255区间的8位无符号整型组成的数组；如果你指定一个在 [0,255] 区间外的值，它将被替换为0或255；如果你指定一个非整数，那么它将被设置为最接近它的整数。（数组）内容被初始化为0。width：以像素为单位的图像的宽
height：以像素为单位的图像的高
三个参数的关系是：data.length = height * width * 4
不满足这个关系的时候就会报错：" The input data length is not a multiple of (4 * width)." ，不要问我为什么知道
构建一个ImageData 对象
使用canvas API
createImageData(): 传入宽和高获得一个ImageData对象或者传入一个已经存在的ImageData对象渲染到画布
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
console.log(ctx.createImageData(200, 200))
getImageData(): 提取一个矩形区域的图像数据，返回一个ImageData对象
ctx.getImageData(矩形区域的左上角 x 坐标, 矩形区域的左上角 y 坐标, 矩形区域的宽度, 矩形区域的高度)
下面是一个简单的小例子让div背景色随着鼠标指针下的图片颜色变化而变化，思路是使用 getImageData() 获取鼠标下1像素的区域，也就是一个RGBA值赋值给div
运行时注意canvas图片使用 getImageData() 的跨域问题
let img = new Image()
img.src = './static/img/1547436818106.png'
let canvas = document.getElementById('canvas')
let ctx = canvas.getContext('2d')
img.onload = () => {
ctx.drawImage(img, 0, 0)
img.style.display = 'none'
}
let color = document.getElementById('color')
canvas.addEventListener('mousemove', (e) =>{
let pixel = ctx.getImageData(e.layerx, e.layery, 1, 1)
color.style.background = 'rgba(' + pixel.data[0] + ',' + pixel.data[1] + ',' + pixel.data[2] + ',' + (pixel.data[3] / 255) + ')'
})
直接使用ImageData()构造函数创建, data可为空
当data为空时会自动按照width和height的大小，以0填充整个像素矩阵，也就是一个空白画布
若需要传入data图像数据，要注意 width * height * 4 = data.length
let imagedata = new ImageData(data, width, height)
// ImageData { width: width, height: height, data: Uint8ClampedArray[width * height * 4] }
操作像素
putImageData(): 对画布进行像素数据的写入，也就是将指定的 ImageData 对象放到画布上，7个参数，前3个为必填
ctx.putImageData(imagedata, 图像数据在目标画布中的位置X坐标, Y坐标, 在图像数据中截取一个矩形区域左上角的位置X坐标, Y坐标, 矩形区域Width, Height);
一个小例子图片灰度处理，思路是使用 getImageData() 获取当前 ImageData 数据，然后遍历 data 数组改变 RGBA 的值，最后在使用 putImageData() 放回画布
let img = new Image()
img.src = './static/img/shareedu.png'
let canvas = document.getElementById('canvas')
let ctx = canvas.getContext('2d')
img.onload = () => {
ctx.drawImage(img, 0, 0)
img.style.display = 'none'
}
document.getElementById('btn').addEventListener('click', ()=>{
let pre = ctx.getImageData(0,0,canvas.width, canvas.height)
let data = pre.data
for (var i = 0; i < data.length; i += 4) {
let avg = (data[i] + data[i +1] + data[i +2]) / 3
data[i] = avg
data[i + 1] = avg
data[i + 2] = avg
}
ctx.putImageData(pre, 0, 0)
})
drawImage(): 在画布上绘制图像，9个参数，image, dx, dy为必填
image: 图像源
sx: 选择需要的图像源区域，矩形选择框的左上角 X 轴坐标。
sy: 矩形选择框的Y 轴坐标。
sWidth: 需要绘制到目标上下文中的，image的矩形（裁剪）选择框的宽度。如果不说明，整个矩形（裁剪）从坐标的sx和sy开始，到image的右下角结束。
sHeight: 需要绘制到目标上下文中的，image的矩形（裁剪）选择框的高度。
dx: image的左上角在目标canvas上 X 轴坐标。
dy: image的左上角在目标canvas上 Y 轴坐标。
dWidth: image在目标canvas上绘制的宽度。 允许对绘制的image进行缩放
dHeight: image在目标canvas上绘制的高度。 允许对绘制的image进行缩放
一个小例子将图片放在鼠标指定位置
let canvas = document.getElementById("canvas")
let ctx = canvas.getContext("2d")
let img = new Image()
img.src = './static/img/shareedu.png'
document.getElementById('canvas').addEventListener('mousedown', (e)=>{
ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height)
ctx.drawImage(img, e.offsetX, e.offsetY, 200, 200)
})
imageSmoothingEnabled, 这是个属性设置图片是否平滑，只需要将他赋值为true（平滑）或者false（不平滑）
canvas.toDataURL('image/png', quality) 返回一个包含图片展示的 data URI , 2个参数, 图片格式默认为png, 0到1的品质选择（图片格式为 image/jpeg 或 image/webp的情况下）
canvas.toBlob(callback, type, quality),创建一个Blob对像，用以展示canvas上的图片，3个参数
callback：回调函数返回一个blob对象
type：图片格式，默认为'image/png'
quality: 0到1的品质选择（图片格式为 image/jpeg 或 image/webp的情况下）