Merge pull request #573 from Lemoncode/Bug/#565-B/W-filter-when-expor…

…ting

#565 bw filters fixed when export

src/pods/properties/components/image-black-and-white/image-black-and-white-selector.component.tsx

@@ -14,6 +14,7 @@ export const ImageBlackAndWhite: React.FC<Props> = props => {
       <p>{label}</p>
       <input
         type="checkbox"
+        checked={imageBlackAndWhite}
         onChange={() => onChange(!imageBlackAndWhite)}
         className={classes.checkbox}
       />

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);
     }
   };