上传图片压缩

1. 原生的上传图片

     <input type="file" onchange="fileChange" />
   

    function fileChange(event){
      // 获得文件对象
      console.log(event.targe.files[0])
      const file = event.target.files[0]
      // 获得base64流数据
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = (e) => {
        // e.target.result 是图片的 base64 流数据
        console.log(e.target.result)
      }
    }
   

通过上述代码可以得到 上传文件的文件对象，然后可转换为 base64

参见例子获得文件对象以及转换base64

2. 图片压缩

   上述代码获得base64流数据，压缩函数如下

    function compressImage(base64Img){
       const image = new Image()
       image.src = base64Img
       let canvas = document.getElementById("compressCanvas")
       if(!canvas){
         const body = document.body
         canvas = document.createElement('canvas') // 创建canvas标签
         canvas.id = 'compressCanvas' // 给外层容器添加一个id
         canvas.style.position = 'fixed'
         canvas.style.zIndex = '-1'
         canvas.style.opacity = '0'
         canvas.style.top = '-100%'
         canvas.style.left = '-100%'
         body.append(canvas)
       }
       const context = canvas.getContext("2d")
       canvas.height = height
       canvas.width = width
       context.drawImage(image, 0, 0, width, height)
       const compressBase64 = canvas.toDataURL('image/jpeg', '0.7')
       // 此处获得压缩后的 base64 流图片
       return compressBase64
   }
   

3. 将压缩后的base64 图片转换为对象

     // 传入文件对象和文件名合成 file 对象 
     function base4ToFile (base64Image, fileName) {
       const arr = base64Image.split(',')
       const mime = arr[0].match(/:(.*?);/)[1]
       const bstr = atob(arr[1])
       let n = bstr.length
       const u8arr = new Uint8Array(n)
       while (n--) {
         u8arr[n] = bstr.charCodeAt(n)
       }
       fileName = fileName || ('pj' + Date.now() + '.jpg')
       return new File([u8arr], fileName, { type: mime })
     }
   

4. 至此，功能部分完成 串起来即可 完整例子 点击跳转