在做一些活动页的时候，经常会有一些需要上传图片的需求，并且还需要将图片以及生成的文字以及贴图生成一张卡可以供用户可以长按保存。这个需求之前完成过一次，最近又遇上了，使用的都是canvas来实现的。干脆整理出一篇博客出来。如果有更好的实现方法，欢迎提出一起探讨。
使用canvas压缩图片
在html中使用写入input标签，type为file时候，可以调出手机的相册可供选择照片，也可以支持摄像头进行拍照功能。在这个场景下，就可能出现图片的体积会更大，可能会超出后端所支持的最大范围，从而导致上传失败。
<input id="file" type="file">1.首先要先获取到图片文件
var eleFile = document.querySelector('#file');
var reader = new FileReader()
eleFile.addEventListener('change', function (event) {
file = event.target.files[0];
console.log(file)
// 选择的文件是图片
if (file.type.indexOf("image") == 0) {
reader.readAsDataURL(file);
}
});
2.这个时候就取到了图片文件，就不得不了解一下js中FileReader对象的使用了
FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容
方法：
| 方法名 | 参数 | 描述 |
|---|---|---|
| abort | none | 中断读取 |
| readAsBinaryString | file | 二进制码 |
| readAsDataURL | file | 将文件读取为 DataURL |
| readAsText | file, [encoding] | 将文件读取为文本 |
readAsText：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。
readAsBinaryString：该方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。
readAsDataURL：这是例子程序中用到的方法，该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。（其中base64的方式就是由此来获得的。。）
FileReader处理事件简介
