HTML5压缩图片

实现思路：

1.通过文件选择按钮获取本地图片
2.获取本地图片的dataURI数据创建本地图片预览
3.创建canvas画布图片预览
4.通过canvas的toDataURL()方法返回压缩后的图片格式的dataURI
5.用canvas返回的dataURI创建压缩后的图片预览

注意点：

1.不兼容低版本IE浏览器
2.canvas 必须有宽度和高度
3.输出为jpg格式才能压缩

方法及参数说明：

CanvasRenderingContext2D.drawImage()
drawImage 方法是 Canvas 2D 对象的方法，作用是将一张图片绘制到 canvas 画布中。
drawImage 有 3 种调用方式：
ctx.drawImage(image, dx, dy);
ctx.drawImage(image, dx, dy, dWidth, dHeight);
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
参数image、sx、sy、sWidth、sHeight、dx、dy、dWidth、dHeight 的用法请点击此链接

HTMLCanvasElement.toDataURL()：
toDataURL 是 canvas 画布元素的方法，返回指定图片格式的 data URI，也就是 base64 编码串。
toDataURL 方法最多接受两个参数，并且这两个参数都是可选的：

• type 为图片格式，支持 image/jpeg、image/png、image/webp(只有chrome支持)这三种格式，默认是 image/png。
• quality 为图片格式质量，取值0 ~ 1 之间的数字，并且只在格式为 image/jpeg 或 image/webp 时才有效，如果参数值格式不合法，将会被忽略并使用默认值(约为0.92)。

效果图

具体实现代码详见DEMO

demo下载地址：https://download.youkuaiyun.com/download/lihefei_coder/11866854