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;