canvas绘制视频 getImageData putImageData

绘制视频
canvas.getContext("2d").drawImage(myvideo, x, y, w, h);

1.ctx.getImageData(sx, sy, sw, sh)：其中sx、sy分别是起点的横纵坐标，sw和sh分别为将要提取的数据对应的矩形图像的宽度和高度；其返回值是一个imageData对象，包含宽度、高度、data（Uint8ClampedArray类型的数组）；
2.ctx.putImageData(imagedata, dx, dy)或者ctx.putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight)用于将一个imageData对象绘制到指定的位图中；其中dx/dy是目标图像相对源图像的坐标偏移；dirtyX/dirtyY是截取的源图像的起始坐标，默认为（0,0）；dirtyWidth/dirtyHeight则是目标图像的宽和高；
3. 通过ctx的getImageData和putImageData方法可以精细控制每帧图像的每个像素值；
4. 该过程中的视频处理其实就是对每一帧图像处理的一个连续过程，因此是一个递归；
 

getImageData得到的信息如下：imageData类型的数据，包含data，height，width，其中data里面是一个Uint8ClampedArray数组（8位无符号整型固定数组， 类型化数组表示一个由值固定在0-255区间的8位无符号整型组成的数组），数组数据内是r，g，b，a的数据，每四个元素对应一个像素点

根据原来getImageData（）得到的imagedata，下面的代码根据g和r（绿色和红色通道）的信息进行筛选，然后符合条件的将a（透明度）置0，由此得到了一个新的imagedata，然后利用putImageData（）绘制到一个新的背景图上面，由此就可以得到替换物体背景的效果啦 ^ _ ^

代码：