Vue前端壓縮圖片

一、在組件包下新建compressImage.js

// 壓縮圖片
// eslint-disable-next-line no-unused-vars
export function compressImage (file, config) {
  // eslint-disable-next-line no-unused-vars
  let src
  // eslint-disable-next-line no-unused-vars
  let files
  // let fileSize = parseFloat(parseInt(file['size']) / 1024 / 1024).toFixed(2)
  const read = new FileReader()
  read.readAsDataURL(file)
  return new Promise(function (resolve, reject) {
    read.onload = function (e) {
      let img = new Image()
      img.src = e.target.result
      img.onload = function () {
        // 默認按比例壓縮
        let w = config.width
        let h = config.height
        // 生成canvas
        let canvas = document.createElement('canvas')
        let ctx = canvas.getContext('2d')
        let base64
        // 創建屬性節點
        canvas.setAttribute('width', w)
        canvas.setAttribute('height', h)
        ctx.drawImage(this, 0, 0, w, h)
       
        base64 = canvas.toDataURL(file['type'], config.quality)
　　　　　
        // 回調函數返回file的值（將base64編碼轉成file）
        // files = dataURLtoFile(base64) // 如果后台接收類型為base64的話這一步可以省略

        // 回調函數返回file的值（將base64轉為二進制）
        let fileBinary = dataURLtoBlob(base64)

        resolve(fileBinary)
      }
    }
  })
};

　　// 將base64轉為二進制
function dataURLtoBlob (dataurl) {
  let arr = dataurl.split(',')
  let mime = arr[0].match(/:(.*?);/)[1]
  let bstr = atob(arr[1])
  let n = bstr.length
  let u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new Blob([u8arr], { type: mime })
}

// base64轉碼（將base64編碼轉回file文件）  此方法我沒用到
// eslint-disable-next-line no-unused-vars
function dataURLtoFile (dataurl) {
  let arr = dataurl.split(',')
  let mime = arr[0].match(/:(.*?);/)[1]
  let bstr = atob(arr[1])
  let n = bstr.length
  let u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new File([u8arr], { type: mime })
}

二、在所需頁面引入compressImage.js

import { compressImage } from '@/components/compressImage'// 圖片壓縮方法

三、使用方法

let config = {
　　width: 100, // 壓縮后圖片的寬
　　height: 100, // 壓縮后圖片的高
　　quality: 1 // 壓縮后圖片的清晰度，取值0-1，值越小，所繪制出的圖像越模糊
}

compressImage(file, config)
　　.then(result => { // result 為壓縮后二進制文件

　　　　this.methodA(result)
　　}) 

四、拿到壓縮后的二進制文件該怎樣發送給后台呢？（我后台用的是  MultipartFile file）

methodA(result) {
　　let fileData = new FormData()
　　fileData.append('file', result)

　　methodB(fileData)
　　　　.then(res => {
　　　　　　
　　　　})
}

五、判斷文件大小，文件太小則不壓縮（如果有需要）

// 單位 M(兆)
let fileSize = parseFloat(parseInt(file['size']) / 1024 / 1024).toFixed(2)

 

ok，結束！vue菜鳥一枚請多指教  (*^▽^*)