前端压缩图片上传

背景

上传图片文件这种需求在项目中经常遇到，不管是pc端还是移动端都会遇到上传图片的功能。由于现在手机拍摄功能的日益强大，相机拍摄的图片也越来越大动辄就是几M甚至十几M。这样上传可能对服务器会造成不小的压力，上传速度和体验也会大打折扣，所以经常就要限制上传的大小尺寸。如果在前端对图片进行压缩后上传，这样问题就能得到一定的缓解。

实现思路

1. 通过input文件选择框拿到要上传的图片文件file
2. FileReader.readAsDataURL()读取file内容。完成后result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容。
3. 创建一个img标签，将FileReader对象返回的base64格式url给到一个img标签
4. img.onload()函数中获取图片的尺寸，再通过canvas.drawImage()绘制图像，设置尺寸或者图像的质量等
5. canvas.toDataURL(file.type, quality) 设置图像的质量，将canvas转换为图片base64格式
6. 完成压缩base64格式转回Blob文件格式，拿到Blob文件上传服务器

核心步骤就是“图片 - canvas - 图片”

一、通过input文件选择框拿到要上传的图片文件file，拿到file文件后可以用FileReader对象去处理

var file = document.querySelector('input[type=file]').files[0];
var reader  = new FileReader();
reader.onload = () => {
    // reader.result 属性将包含一个data:URL格式的字符串（base64编码）以表示所读取文件的内容。
    img.src = reader.result; // 这里可以实现上传图片的预览功能 
}
// readAsDataURL 方法会读取指定的 Blob 或 File 对象。读取操作完成的时候，readyState 会变成已完成
// DONE，并触发 loadend (en-US) 事件，同时 result 属性将包含一个data:URL格式的字符串（base64编码）
// 以表示所读取文件的内容。
 reader.readAsDataURL(file);

注意