CanvasBase64

发表于 | 分类于

图片通过canvas转base64

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import { onMounted } from 'vue'

type Options = {
  el: string
}

export default function useBase64(options: Options): Promise<{ baseUrl: string }> {
  return new Promise((resolve) => {
    onMounted(() => {
      //获取图片实例
      let img: HTMLImageElement = document.querySelector(options.el) as HTMLImageElement
      //是否加载完成    
      img.onload = () => {
        resolve({
          baseUrl: base64(img)
        })
      }
    })

    const base64 = (el: HTMLImageElement) => {
      const canvas = document.createElement('canvas')
      const ctx = canvas.getContext("2d")
      canvas.width = el.width
      canvas.height = el.height
      ctx?.drawImage(el, 0, 0, canvas.width, canvas.height)
      return canvas.toDataURL('image/png')
    }
  })
  
  // useBase64({ el: "#img" }).then(res => {
  //   console.log(res.baseUrl);
  // })