背景
移动端工单报修的场景中，上传图片的功能已经屡见不鲜，但现在手机像素普遍较高，随手拍一张图片都6、7M，十几兆的图片也并不罕见。如果这些未处理的图片直接随数据上传向服务器，不但会占用更多的存储空间，而且用户也要等更久的时间，体验性会差很多，同时更长的传输时间，也加大了问题发生的概率，基于这些情况，压缩图片并上传的需求应运而生。
基本原理
- 应用FileReader 将文件转换为URL格式的字符串，这个URL可以直接被Image 节点使用
- Imgage使用上面的URL生成image节点，此时可以获取原始图片的width、height等相关信息
- 应用canvas重新绘制压缩后的图片
- 将压缩后的canvas上的图片转换成Blob，并上传到服务器
FileReader
FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用File或Blob对象指定要读取的文件或数据。
其中File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。
FileReader.readAsDataURL()该方法会读取指定的 Blob 或 File 对象。读取操作完成的时候，readyState 会变成已完成（DONE），并触发 loadend 事件，同时 result 属性将包含一个data:URL格式的字符串（base64编码）以表示所读取文件的内容。
canvas
canvas用来转换图片，将原来的图片“另存为”新图片。这里核心方法是cavas的drawImage方法来压缩图片。
cavasObj.drawImage(img, x, y, width, height)其中参数img 为要处理的源图片，x为canvas生成图片的起始x位置，y为图片的起始y位置，width为生成图片最终的宽度，heigth为图片最终高度。当width(height)小于源图片的宽度（高度）时，图片就被压缩了。
图片上传
上传图片至服务器，使用formData对象生成表单，这里使用axios提交数据
function uploadFile (fileObj) {
const payload = new FormData()
payload.append("file", fileObj)
axios.post("upload", payload, {
headers: {"Content-Type": "multipart/form-data"},
params: {'userName': user, 'desc': 'desc‘, 'fileName': fileName}
})
}
完整示例代码
// max 500 * 320
const maxHeight = 500
const maxWidth = 300
let img = new Image()
// fileObj为上传的文件
img.src = fileObj.content
img.onload = () => {
const originHeight = img.height
const originWidth = img.width
let compressedWidth = img.height
let compressedHeight = img.width
if ((originWidth > maxWidth) && (originHeight > maxHeight)) {
// 更宽更高，
if ((originHeight / originWidth) > (maxHeight / maxWidth)) {
// 更加严重的高窄型，确定最大高，压缩宽度
compressedHeight = maxHeight
compressedWidth = maxHeight * (originWidth / originHeight)
} else {
//更加严重的矮宽型, 确定最大宽，压缩高度
compressedWidth = maxWidth
compressedHeight = maxWidth * (originHeight / originWidth)
}
} else if (originWidth > maxWidth && originHeight <= maxHeight) {
// 更宽，但比较矮，以maxWidth作为基准
compressedWidth = maxWidth
compressedHeight = maxWidth * (originHeight / originWidth)
} else if (originWidth <= maxWidth && originHeight > maxHeight) {
// 比较窄，但很高，取maxHight为基准
compressedHeight = maxHeight
compressedWidth = maxHeight * (originWidth / originHeight)
} else {
// 符合宽高限制，不做压缩
}
let compressedCanvas = document.createElement("canvas")
let context = compressedCanvas.getContext("2d")
compressedCanvas.height = compressedHeight
compressedCanvas.width = compressedWidth
context.clearRect(0, 0, compressedWidth, compressedHeight)
context.drawImage(img, 0, 0, compressedWidth, compressedHeight)
let base64_img = compressedCanvas.toDataURL('image/jpeg')
const blobBin = atob(base64_img.split(',')[1]);
let data = [];
for(var i = 0; i < blobBin.length; i++) {
data.push(blobBin.charCodeAt(i));
}
let file = new Blob([new Uint8Array(data)], {type: 'image/png'});
// 上传file 至服务器
uploadFile(file)
}
