canvas 가져오기

 /// <reference path="react-image-editor.d.ts" />
 /// <reference path="react-image-editor.d.ts" />
 import ImageEditor from "@toast-ui/react-image-editor";
 import ImageEditor from "@toast-ui/react-image-editor";
+import { useEffect, useState } from "react";
 import "tui-image-editor/dist/tui-image-editor.css";
 import "tui-image-editor/dist/tui-image-editor.css";
 
 
 const ToastEditor = () => {
 const ToastEditor = () => {
+  const [lowerCanvas, setLowerCanvas] = useState<HTMLCanvasElement>();
+  // console.log(
+  //   document.getElementsByClassName("lower-canvas")[0]?.toDataURL("image/png")
+  // );
+  console.log("c");
+
+  // const [upperCanvas, setUpperCanvas] = useState(
+  //   document.getElementsByClassName("upper-canvas ")[0]
+  // );
+
+  useEffect(() => {
+    window?.addEventListener("click", () => {
+      setLowerCanvas(
+        document.getElementsByClassName("lower-canvas")[0] as HTMLCanvasElement
+      );
+    });
+  }, []);
+
+  useEffect(() => {
+    const img = lowerCanvas?.toDataURL("image/png");
+    let w = window.open();
+    if (w?.window) w.document.body.innerHTML = "<img src='" + img + "'>";
+
+    console.log("b");
+    if (lowerCanvas?.getContext) {
+      console.log(lowerCanvas.getContext("2d"));
+    }
+  }, [lowerCanvas?.toDataURL("image/png")]);
+
   return (
   return (
     <ImageEditor
     <ImageEditor
       includeUI={{
       includeUI={{