使用promise获取image.onload返回值

最新推荐文章于 2022-12-15 09:28:45 发布

H、X

最新推荐文章于 2022-12-15 09:28:45 发布

阅读量2.8k

点赞数 2

文章标签： typescript

本文链接：https://blog.csdn.net/weixin_45051759/article/details/124018926

版权

const getBase64Image = (img: HTMLImageElement) => {
  const canvas = document.createElement('canvas')
  canvas.width = img.width
  canvas.height = img.height
  const ctx = canvas.getContext('2d')
  ctx?.drawImage(img, 0, 0, img.width, img.height)
  let ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase()
  if (ext === 'jpg') {
    ext = 'jpeg' //这个地方是由于如果是jpg, 他会识别成image/png
  }
  const dataURL = canvas.toDataURL('image/' + ext)
  return dataURL
}
export const imageToBase64 = (imgUrl: string): Promise<string> => {
  // 使用promise.resolve返回image.onload处理结果
  return new Promise((resolve) => {
    const image = new Image()
    image.crossOrigin = ''
    image.src = require(`@/assets/images/${imgUrl}`)
    image.onload = function () {
      resolve(getBase64Image(image))
    }
  })
}