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.
+    // Save current background
-    // TODO: Print screen
+    const originalBgColor = editorMemo.backgroundColor;
-    // TODO: print screen without background image and background color, the background image should be white
+    const originalBgImage = editorMemo.backgroundImage;
-    // TODO: after printing, the background image and background color should be restored
+
    // 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 = () => {