前端使用canvas压缩图片

// 压缩图片
export const compressImage = (file: File): Promise<File> => {
  const that = this
  return new Promise((resolve, reject) => {
    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')
    const img = new Image()
    const maxWidth = 1500
    // const ratio = maxWidth / img.width;
    img.onload = () => {
      canvas.width = img.width
      canvas.height = img.height
      console.log('宽：',canvas.width, '高',canvas.height)
      console.log('新宽高', 1500, img.height *(1500 / img.width))
      ctx.drawImage(img, 0, 0, 1500, img.height * (1500 / img.width) )
      canvas.toDataURL("image/jpeg", 0.8)
      // 转换回file文件
      // const compressFile = dataURLtoBlob(img64, file.type)
      // resolve(new File(
      //     [that.dataURLtoBlob(dataURL)],
      //     imgInfo.file.name
      // ))

      // resolve(compressFile)
      canvas.toBlob((blob) => {
        resolve(new File([blob as Blob], file.name.replace(/\.[^/.]+$/, ".jpg"), { type: "image/jpeg" }))
      }, "image/jpeg")
    }
    img.onerror = (error) => {
      reject(error)
    }
    img.src = URL.createObjectURL(file)
  })
}

file转base64

// h5文件转base64
export const getImageBase64 = (file: File): Promise<string> => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onload = () => {
      const base64Data = reader.result as string
      resolve(base64Data)
    }
    reader.onerror = (error) => {
      reject(error)
    }
    reader.readAsDataURL(file)
  })
}