图片压缩上传 尺寸按需缩小

参考

前端图片压缩上传（压缩篇）：可能是最适合小白的前端图片压缩文章了！

缘由

公司新需求，对图片上传进行压缩，以及对尺寸进行对应缩小，之前也写过，但是没有记录，现在重新整理一下，再遇到就直接看自己的就行了

代码

// import { upload } from '@/api/upload'

// 默认压缩配置
const DefaultConfig = {
  width: 800,
  height: 600,
  quality: 0.92,
  fileType: 'jpg'
}
// base64转Blob
export const converrVase64UrlToBlob = (base64, mimeType) => {
  // mimeType 图片类型，例如 mimeType='image/png'
  const bytes = window.atob(base64.split(',')[1]) // atob方法用于解码base64
  // 创建一个长度为 bytes.length 的 buffer(一个二进制文件), 它会分配一个 16 字节（byte）的连续内存空间，并用 0 进行预填充。
  const ab = new ArrayBuffer(bytes.length)

  // Uint8Array —— 将 ArrayBuffer 中的每个字节视为 0 到 255 之间的单个数字（每个字节是 8 位）。这称为 “8 位无符号整数”。
  const ia = new Uint8Array(ab)
  for (let i = 0; i < bytes.length; i++) {
    // 更改里面的初始化内容
    ia[i] = bytes.charCodeAt(i)
  }
  // 创建blob格式数据，并传入二进制文件和文件原本类型
  return new Blob([ia], { type: mimeType })
}
/**
 * 压缩图片
 * @param file:文件
 * @param config 压缩配置
 * @param {Number} config.width    最大图像的宽度 默认 800，0不做变动
 * @param {Number} config.height   最大图像的高度 默认 600，0不做变动
 * @param {Number} config.quality  图像质量 0-1 默认0.92
 * @param {String} config.fileType  文件类型 jpg | png
 * @return 压缩后的Blob
 */
export const canvasCompress = async (file, config = {}) => {
  if (!file) return ''
  const { width, height, quality, fileType } = { ...DefaultConfig, ...config }
  let maxWidth = width
  let maxHeight = height
  return new Promise((resolve, reject) => {
    const reader = new FileReader() //读取文件的对象
    reader.readAsDataURL(file) //对文件读取，读取完成后会将内容以base64的形式赋值给result属性
    reader.onload = function () {
      //读取完成的钩子
      const img = new Image() // const quality = 0.2 // 图像质量
      const canvas = document.createElement('canvas')
      const ctx = canvas.getContext('2d')
      img.src = this.result as any
      img.onload = async function () {
        //图片加载完后
        // 不对图片尺寸做处理
        if (maxWidth === 0 || maxHeight === 0 || img.width < maxWidth || img.height < maxHeight) {
          maxWidth = img.width
          maxHeight = img.height
        } else if (maxWidth / maxHeight > img.width / img.height) {
          // 宽比高的相对比例高
          maxHeight = (img.height / img.width) * maxWidth
        } else {
          // 高比宽的相对比例高
          maxWidth = (img.width / img.height) * maxHeight
        }
        canvas.width = maxWidth
        canvas.height = maxHeight
        ctx?.drawImage(img, 0, 0, canvas.width, canvas.height) //绘制图像；把大图片画在一张小画布上，压缩就这么实现了 // 返回base64 //quality表示导出的图片质量,只要导出为jpg和webp格式的时候此参数才有效果，默认值是0.92
        const imgResult = canvas.toDataURL(fileType, quality) // resolve(imgResult) // 这时可能后端要求我们传文件格式图片 base64转Blob
        const blobImg = converrVase64UrlToBlob(imgResult, fileType)
        // console.log(blobImg, 'blobImg')
        resolve(blobImg)
        // 因为名称blob不能设置名称，所以转换成了 File，这样传给后端就有名称了
        // resolve(new File([blobImg], file?.name || '01.jpg', { type: fileType }))
        // await upload(blobImg)
      }
      img.onerror = function (e) {
        reject(e)
      }
    }
  })
}