持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第4天，点击查看活动详情
canvas还有一个重要的能力，操作图像的能力。
CanvasImageSource是一个辅助类型，描述下面类型的任何一个对象：HTMLImageElement,HTMLVideoElement,HTMLCanvasElement,CanvasRenderingContext2D, 或ImageBitmap. canvas图片源包括浏览器img标签，video标签，canvas标签和canvas绘制上下文，以及ImageBitmap(高性能位图)
实现查看商品细节的功能
这里我们使用img标签图片源来实现查看商品细节的功能。
要实现这个功能，我们会用到drawImage这个api,那么我们看看这个api都有什么参数，是什么作用:
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
这个方法是一个重载方法，我们可以按照下面几种形式使用它.
- drawImage(image,sx, sy,sWidth, sHeight),将一张图片完整绘制到canvas画布(sx,sy)处。
- drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight),将一张图片在(sx,sy)处裁剪sWidth,sHeight,然后画到画布的(dx,dy)坐标处，宽高分别为dWidth,dHeight 要实现完整的细节，思路如下：
- 在img标签上监听鼠标mousemove事件
- 获取图片的实际宽高
- 获得鼠标位于图片的坐标位置
- 计算得出一个放大范围，也就是获得sx,sy,sWidth,sHeight,这即是悬浮在图片上的选框的定位大小样式，又是drawImage的参数。
实现滤镜功能
Image()函数将会创建一个新的HTMLImageElement实例。
var img = new Image();
img.crossOrigin = 'anonymous';
crossOrigin设置为anonymous表示请求图片不要求使用凭证。如果设置为use-credentials，即使图片服务器没有设置跨域限制，浏览器仍然会报跨域错误。
为了获得一个包含画布场景像素数据的ImageData对像，你可以用getImageData()方法 这里获得的图片像素数据,是一个Uint8ClampedArray类型化数组，无符号整型固定值数组，值的范围在0到255之间。 每个像素由四个值组成，第四个值透明度可以用来造型，不过这个造型也是很困难的。改变颜色也仅仅是环境整体的颜色，单独改造也是挺困难的。 下面就是一个将顶部背景去掉的一个demo。
