Base64Png Editor Get Initial Content

Base64PngEditor.tsx

useEffect(() => {
  const ctx = canvasRef.current?.getContext("2d")!;

  /**
   * Initial canvas size
   */
  canvasRef.current!.width = 0;
  canvasRef.current!.height = 0;

  imageRef.current!.onload = () => {
    /**
     * Update the canvas size
     */
    canvasRef.current!.width = imageRef.current!.width;
    canvasRef.current!.height = imageRef.current!.height;

    /**
     * Draw the image on the canvas
     */
    ctx.drawImage(imageRef.current!, 0, 0);

    /**
     * The toDataUrl() returns the base64 information in the format "<base64 header>,<base64 data>"
     * We just need the base64 data.
     */
    setEditorContent(canvasRef.current!.toDataURL().split(",")[1]);
  };

  return () => {
    imageRef.current!.onload = null;
  };
}, []);