HTML5新元素canvas属性drawImage的理解

在最近的项目中要用到图片压缩之后上传，但是图片本身过大有的不止5M,这就需要在上传之前进行图片的压缩处理。根据一位大神的思路采用了canvas，

记录如下：

1. 监听一个 input (type='file') 的 change 事件，然后拿到文件的 file;
2. 把 file 转成 dataURL；
3. 然后用 canvas 绘制图片，绘制的时候经过算法按比例裁剪;
4. 然后再把 canvas 转成 dataURL;
5. 再把 dataURL 转成 blob;
6. 接着把  blob append 到 FormData 的实例对象。
7. 上传。

使用理解：

一：drawImage(image, dx, dy) 
二：drawImage(image, dx, dy, dw, dh) 
三：drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

参数：image：就是图片本身，

　　　  sx,sy:  是图片的起始坐标，在图片上找一个点（sx,sy）开始绘制，

　　　 sw,sh:  是以(sx,sy)为起始，在横轴，纵轴上展示的图片的宽度和高度，定义了宽多少，高多少

　　　 dx,dy:   是图片在canvas中定位的坐标值

　　　 dw,dh:  是image在canvas中即将绘制区域（相对dx和dy坐标的偏移量）的宽度和高度值；

 

canvas.toDataURL("image/jpeg", 0.1);第二个参数的值（也就是图片质量，图片尺寸大小会随着调整）

语法：canvas.toDataURL(type, encoderOptions);

 参数：type 可选，图片格式，默认为 image/png

     encoderOptions 可选

     在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略。