ISSUE 6: add print functionality

2025-07-02 17:23:00 +01:00
parent 9936cd0ffc
commit 4904f4d66a
1 changed files with 43 additions and 4 deletions
@@ -521,10 +521,49 @@ export const DockBuilder = () => {
  }, [editorMemo]);

  const onPrintScreen = useCallback(() => {
-    //  convert the canvas to a data url and download it.
-    // TODO: Print screen
-    // TODO: print screen without background image and background color, the background image should be white
-    // TODO: after printing, the background image and background color should be restored
+    // Save current background
+    const originalBgColor = editorMemo.backgroundColor;
+    const originalBgImage = editorMemo.backgroundImage;
+
+    // Set background to white for printing
+    editorMemo.setBackgroundColor(
+      "#fff",
+      editorMemo.renderAll.bind(editorMemo)
+    );
+    editorMemo.setBackgroundImage(null, editorMemo.renderAll.bind(editorMemo));
+
+    // Give time for background to update
+    setTimeout(() => {
+      const dataUrl = editorMemo.toDataURL({
+        format: "png",
+        enableRetinaScaling: true,
+      });
+      const printWindow = window.open("", "_blank");
+      if (printWindow) {
+        printWindow.document.write(
+          '<html><head><title>Print Canvas</title></head><body style="margin:0"><img src="' +
+            dataUrl +
+            '" style="width:100vw;max-width:100%"/></body></html>'
+        );
+        printWindow.document.close();
+        printWindow.focus();
+        printWindow.onload = function () {
+          printWindow.print();
+          printWindow.close();
+        };
+      }
+      // Restore original background
+      editorMemo.setBackgroundColor(
+        originalBgColor,
+        editorMemo.renderAll.bind(editorMemo)
+      );
+      if (originalBgImage) {
+        editorMemo.setBackgroundImage(
+          originalBgImage,
+          editorMemo.renderAll.bind(editorMemo)
+        );
+      }
+    }, 200);
  }, [editorMemo]);

  const CopySelection = () => {