如何用JS將base64圖片壓縮至指定大小

更新時間：2025年04月01日 08:35:05 作者：喜歡代碼的新之助

在開發(fā)中通常在上傳圖片時,由于各種限制,需要將上傳的圖片壓縮到某一大小范圍內(nèi)才能上傳,這篇文章主要介紹了如何用JS將base64圖片壓縮至指定大小的相關(guān)資料,需要的朋友可以參考下

壓縮圖片原理

通過原生的input標(biāo)簽?zāi)玫揭蟼鞯膱D片文件
將圖片文件file對象轉(zhuǎn)化成圖片base64
根據(jù)圖片base64創(chuàng)建img圖片對象
在canvas上繪制該HTMLImageElement
通過不斷降低圖片質(zhì)量指數(shù)來達(dá)到壓縮圖片大小的目的

封裝

將以上代碼封裝為一個js文件，這里命名為compressImg.js，放置在utils文件夾下

/**
 * 壓縮圖片到指定大小
 * @param baseImg base64圖片
 * @param maxSize 單位kb
 */
export function compressImgBySize (baseImg, maxSize = 200) {
  return new Promise((resolve) => {
  	// 計(jì)算圖片大小
    const strLength = baseImg.length
    const fileLength = parseInt(strLength - (strLength / 8) * 2)
    let size = parseInt((fileLength / 1024).toFixed(2))

	// 判斷圖片是否符合指定大小要求
    if (size <= maxSize) {
      resolve(baseImg)
      return
    }

	// 創(chuàng)建image對象
    const img = new Image()
    if (baseImg.indexOf('data:image/') !== -1) {
      img.src = baseImg
   	} else {
      img.src = 'data:image/jpeg;base64,' + baseImg
	}
	
    img.onload = () => {
      // 把image對象 轉(zhuǎn)換為 canvas對象
      const canvas = imgToCanvas(img)
      let resUrl = ''
      // 圖片質(zhì)量，范圍：0 ~ 1
      let quality = 0.9
      
      // 當(dāng)圖片大小大于指定maxSize，圖片質(zhì)量大于0時繼續(xù)通過降低圖片資料來壓縮
      while (size > maxSize && quality > 0) {
      	// 在canvas上繪制該HTMLImageElement，得到圖片base64
        resUrl = canvas.toDataURL('image/jpeg', quality).replace(/^data:image\/\w+;base64,/, '')
        const resLength = resUrl.length
        // 計(jì)算繪制出的base64圖片大小
        const resFileLength = parseInt(resLength - (resLength / 8) * 2)
        size = parseInt((resFileLength / 1024).toFixed(2))
        // 降低圖片質(zhì)量
        quality = (quality - 0.1).toFixed(1)
      }
      resolve(resUrl)
    }
    img.onerror = () => {
      resolve(baseImg)
    }
  })
}

// 把image 轉(zhuǎn)換為 canvas對象
export function imgToCanvas (image) {
  var canvas = document.createElement('canvas')
  canvas.width = image.width
  canvas.height = image.height
  canvas.getContext('2d').drawImage(image, 0, 0)
  return canvas
}

在需要使用圖片壓縮的.vue文件中引入并使用，如下

// 注意引入路徑是否正確
import { compressImgBySize } from '@/utils/compressImg'

// this.applyFile[0].content 為指定的base64格式照片
// 1200 指將圖片壓縮到1200kb大小以下
compressImgBySize('file文件對象', 1200).then(baseImg => {
	// 輸出圖片base64
	console.log(baseImg)
})

附：js圖片轉(zhuǎn)base64

toBase64(file){//轉(zhuǎn)base64
    let base64=''
    const reader = new FileReader();  
    reader.readAsDataURL(file); 
    reader.onload = (e) => {  
        // 轉(zhuǎn)換完成，獲取Base64編碼  
        this.imgBase64 = e.target.result;
        if(this.imgBase64){
            this.suofang(this.imgBase64,this.getImgList)
        }  
        // 這里可以根據(jù)需要對base64進(jìn)行處理，比如存儲到Vuex、Data等 
        return base64 
    }
},