前端压缩并上传图片

背景

移动端工单报修的场景中，上传图片的功能已经屡见不鲜，但现在手机像素普遍较高，随手拍一张图片都6、7M，十几兆的图片也并不罕见。如果这些未处理的图片直接随数据上传向服务器，不但会占用更多的存储空间，而且用户也要等更久的时间，体验性会差很多，同时更长的传输时间，也加大了问题发生的概率，基于这些情况，压缩图片并上传的需求应运而生。

基本原理

1. 应用FileReader 将文件转换为URL格式的字符串，这个URL可以直接被Image 节点使用
2. Imgage使用上面的URL生成image节点，此时可以获取原始图片的width、height等相关信息
3. 应用canvas重新绘制压缩后的图片
4. 将压缩后的canvas上的图片转换成Blob，并上传到服务器

FileReader

FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。
其中File对象可以是来自用户在一个元素上选择文件后返回的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)
        }