好用的hooks开源库

vueUse

img转base64 hooks实现

import { onMounted } from 'vue';

type Options = {
  el: string
}

export default (options: Options) => {
  
  return new Promise(resolve => {
    onMounted(() => {
      // 找到img元素
      const img: HTMLImageElement = document.querySelector(options.el) as HTMLImageElement
      // img加载完毕以后
      img.onload = () => {
        resolve(base64(img))
      }
    })
    const base64 = (el: HTMLImageElement) => {
      // 创建canvas
      const canvas = document.createElement('canvas')
      // 获取canvas的渲染上下文和绘制功能
      const ctx = canvas.getContext('2d')
      // 指定宽高
      canvas.width = el.width
      canvas.height = el.height
      /*
        绘制元素
        ctx.drawImage(image, dx, dy)
        ctx.drawImage(image, dx, dy, dWidth, dHeight)
        ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
        image：绘制到上下文的元素
        dx：image距离上下文左上角的x轴坐标
        dy：image距离上下文左上角的y轴坐标
        dWidth：绘制的画布的宽度
        dHeight：绘制的画布的高度
        sx：绘制到目标上下文中的image的被裁减的x的距离
        sy：绘制到目标上下文中的image的被裁减的y的距离
        sWidth：绘制到目标上下文中的image的宽度
        sHeight：绘制到目标上下文中的image的高度
      */
      ctx?.drawImage(el, 0, 0, 100, 100, 0, 0, el.width, el.height)
      // 转base64
      return canvas.toDataURL('image/png')
    }
  })
}