圖片壓縮插件image-conversion

1 前言

解決圖片拍攝上傳原圖過大導(dǎo)致上傳時間過長然后超時報錯的問題。

  • 優(yōu)點:壓縮圖片減少上傳時間
  • 缺點:圖片會變糊,對于圖片質(zhì)量要求不高可以使用

2 安裝

安裝第三方插件 image-conversion:

npm install --save image-conversion

3 使用

在文件中引入插件:

import * as imageConversion from 'image-conversion'

封裝一個方法,輸入上傳的圖片file和需要限制的大小limit,單位是KB,輸出一個壓縮后的圖片Blob

    compressImg (file, limit) {
      return new Promise((resolve) => {
        if (file.size > limit) {
          imageConversion.compressAccurately(file, limit).then(res => {
            resolve(res)
          })
        } else {
          resolve(file)
        }
      })
    }

在文件上傳的時候使用,只壓縮超過100k的圖片:

      const size = file.size / 1024
      console.log(`壓縮前${size}k`)
      this.compressImg(file, 100).then(comRes => {
        console.log(`壓縮后${comRes.size / 1024}k`)
      })

隨便傳兩張圖片:

小于100k圖片

大于100k圖片

壓縮完圖片以后便可以執(zhí)行上傳了

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容