Get Img Dom Base64 Png Url

import { useEffect } from 'react'

export function Test() {
  const convertImgDomToBase64PngUrl: () => string = () => {
    const img = document.querySelector('img') as HTMLImageElement
    const canvas = document.querySelector('canvas') as HTMLCanvasElement
    const ctx = canvas.getContext('2d')
    if (canvas) {
      canvas.width = img.width
      canvas.height = img.height
    }
    if (ctx) {
      ctx.drawImage(img, 0, 0)
    }
    return canvas.toDataURL('image/png')
  }

  useEffect(() => {
    convertImgDomToBase64PngUrl()
  }, [])

  return (
    <div>
      <img crossOrigin="anonymous" src="picture.png" />
      <canvas />
    </div>
  )
}

export default Test