#565 bw filters fixed when export

Lemoncode · Nov 23, 2024 · 4fd3a08 · 4fd3a08
1 parent 794a7db
commit 4fd3a08
Showing 1 changed file with 20 additions and 1 deletion.
diff --git a/src/pods/toolbar/components/export-button/export-button.tsx b/src/pods/toolbar/components/export-button/export-button.tsx
@@ -4,6 +4,7 @@ import classes from '@/pods/toolbar/toolbar.pod.module.css';
 import { Stage } from 'konva/lib/Stage';
 import { calculateCanvasBounds } from './export-button.utils';
 import { ToolbarButton } from '../toolbar-button';
+import Konva from 'konva';
 
 export const ExportButton = () => {
   const { stageRef, shapes } = useCanvasContext();
@@ -21,20 +22,38 @@ export const ExportButton = () => {
     stage.scale({ x: 1, y: 1 });
   };
 
+  const applyFiltersToImages = (stage: Stage) => {
+    stage.find('Image').forEach(node => {
+      if (node.filters()?.includes(Konva.Filters.Grayscale)) {
+        node.cache({
+          x: 0,
+          y: 0,
+          width: node.width(),
+          height: node.height(),
+          pixelRatio: 2,
+        });
+      }
+    });
+  };
+
   const handleExport = () => {
     if (stageRef.current) {
       const originalStage = stageRef.current;
       const clonedStage = originalStage.clone();
+
+      applyFiltersToImages(clonedStage);
       resetScale(clonedStage);
+
       const bounds = calculateCanvasBounds(shapes);
       const dataURL = clonedStage.toDataURL({
-        mimeType: 'image/png', // Change to jpeg to download as jpeg
+        mimeType: 'image/png', // Swap to 'image/jpeg' if necessary
         x: bounds.x,
         y: bounds.y,
         width: bounds.width,
         height: bounds.height,
         pixelRatio: 2,
       });
+
       createDownloadLink(dataURL);
     }
   };