如何用JS将base64图片压缩至指定大小-牛翰网

压缩图片原理

通过原生的input标签拿到要上传的图片文件
将图片文件file对象转化成图片base64
根据图片base64创建img图片对象
在canvas上绘制该HTMLImageElement
通过不断降低图片质量指数来达到压缩图片大小的目的

封装

将以上代码封装为一个js文件，这里命名为compressImg.js，放置在utils文件夹下

/**
 * 压缩图片到指定大小
 * @param baseImg base64图片
 * @param maxSize 单位kb
 */
export function compressImgBySize (baseImg, maxSize = 200) {
  return new Promise((resolve) => {
  	// 计算图片大小
    const strLength = baseImg.length
    const fileLength = parseInt(strLength - (strLength / 8) * 2)
    let size = parseInt((fileLength / 1024).toFixed(2))

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

	// 创建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对象 转换为 canvas对象
      const canvas = imgToCanvas(img)
      let resUrl = ''
      // 图片质量，范围：0 ~ 1
      let quality = 0.9
      
      // 当图片大小大于指定maxSize，图片质量大于0时继续通过降低图片资料来压缩
      while (size > maxSize && quality > 0) {
      	// 在canvas上绘制该HTMLImageElement，得到图片base64
        resUrl = canvas.toDataURL('image/jpeg', quality).replace(/^data:image\/\w+;base64,/, '')
        const resLength = resUrl.length
        // 计算绘制出的base64图片大小
        const resFileLength = parseInt(resLength - (resLength / 8) * 2)
        size = parseInt((resFileLength / 1024).toFixed(2))
        // 降低图片质量
        quality = (quality - 0.1).toFixed(1)
      }
      resolve(resUrl)
    }
    img.onerror = () => {
      resolve(baseImg)
    }
  })
}

// 把image 转换为 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图片转base64

toBase64(file){//转base64
    let base64=''
    const reader = new FileReader();  
    reader.readAsDataURL(file); 
    reader.onload = (e) => {  
        // 转换完成，获取Base64编码  
        this.imgBase64 = e.target.result;
        if(this.imgBase64){
            this.suofang(this.imgBase64,this.getImgList)
        }  
        // 这里可以根据需要对base64进行处理，比如存储到Vuex、Data等 
        return base64 
    }
},