Canvas小结

1、在图片的onload事件中把图片绘到画布上后：

　　当图片的src值是本地文件目录时，canvas.toDataURL()、ctx.getImageData()方法无法使用，并且浏览器会报错；

　　当图片的src值是base64形式时则canvas.toDataURL()、ctx.getImageData()方法都能使用且浏览器也不会报错；

    

 　　解决：通过服务器访问页面而不是直接双击html文件浏览。

2、canvas转为图片：

　　可以使用canvas.toDataURL()或者canvas2image.js插件将canvas元素转为图片；

　　如果转出来的图片有点模糊可以尝试这样做：

　　(1)假设最终导出来的图片的宽高分别为380px和380px；

　　(2)设置canvas的width和height是380的3倍（或者更高的倍数）,再设置canvas的样式宽高与最终导出来的图片宽高相同，即canvas.setAttribute("style","width:380px;height:380px;");

　　(3)设置绘图放大：ctx.scale(3,3);

　　(4)接下来就是一系列绘图操作，注意ctx.drawImage()等方法的参数会自动乘以放大倍数3，但也有例外，如ctx.getImageData()中的参数就没有自动乘以倍数；

　　(5)最后可利用canvas2image.js插件将canvas转为380x380的图片。

3、利用canvas压缩、旋转图片

在移动端上传图片可能出现图片旋转的情况，可以使用small-exif.js插件获取Orientation字段的值从而根据这个值了解图片发生了怎样的旋转：

 通过<input type="file">控件上传的图片是文件file的类型，用FileReader读成base64的形式后，将该base64字符串赋值给一个img的src属性：

然后在img的onload事件中设置好压缩后的图片的宽高（保持原有的宽高比），也就是画布canvas的宽高。根据Orientation字段的值再次调整画布宽高、旋转、绘图：

 

最后通过canvas.toDataURL(imgType,压缩质量0-1)实现压缩：