mjpic 1.0.19 → 1.0.21

package/src/components/layout/Header.tsx

@@ -15,6 +15,132 @@ export const Header = ({ stageRef }: HeaderProps) => {
   const [isSaveDialogOpen, setIsSaveDialogOpen] = useState(false);
   const [currentPath, setCurrentPath] = useState<string | undefined>(undefined);
 
+  const pickOpaqueEdgeColor = (canvas: HTMLCanvasElement): string | null => {
+    const ctx = canvas.getContext('2d', { willReadFrequently: true } as any) as CanvasRenderingContext2D | null;
+    if (!ctx) return null;
+    const w = canvas.width;
+    const h = canvas.height;
+    if (w <= 0 || h <= 0) return null;
+
+    const scan = (sx: number, sy: number, sw: number, sh: number) => {
+      try {
+        const data = ctx.getImageData(sx, sy, sw, sh).data;
+        for (let i = 0; i < data.length; i += 4) {
+          const a = data[i + 3];
+          if (a !== 0) {
+            return `rgb(${data[i]}, ${data[i + 1]}, ${data[i + 2]})`;
+          }
+        }
+      } catch {
+        return null;
+      }
+      return null;
+    };
+
+    return (
+      scan(0, 0, w, 1) ||
+      scan(0, h - 1, w, 1) ||
+      scan(0, 0, 1, h) ||
+      scan(w - 1, 0, 1, h) ||
+      scan(Math.max(0, Math.floor(w / 2) - 8), 0, Math.min(16, w), Math.min(16, h)) ||
+      null
+    );
+  };
+
+  const createCanvasFromSource = (source: CanvasImageSource, width: number, height: number) => {
+    const canvas = document.createElement('canvas');
+    canvas.width = Math.max(1, Math.round(width));
+    canvas.height = Math.max(1, Math.round(height));
+    const ctx = canvas.getContext('2d');
+
+    if (ctx) {
+      ctx.imageSmoothingEnabled = true;
+      ctx.imageSmoothingQuality = 'high';
+      ctx.drawImage(source, 0, 0, canvas.width, canvas.height);
+    }
+
+    return canvas;
+  };
+
+  const sanitizeTransparentEdges = (canvas: HTMLCanvasElement) => {
+    const ctx = canvas.getContext('2d', { willReadFrequently: true } as any) as CanvasRenderingContext2D | null;
+    if (!ctx) return canvas;
+
+    const { width, height } = canvas;
+    if (width <= 1 || height <= 1) return canvas;
+
+    const imageData = ctx.getImageData(0, 0, width, height);
+    const { data } = imageData;
+
+    const isRowTransparent = (y: number) => {
+      for (let x = 0; x < width; x += 1) {
+        if (data[(y * width + x) * 4 + 3] !== 0) return false;
+      }
+      return true;
+    };
+
+    const isColumnTransparent = (x: number) => {
+      for (let y = 0; y < height; y += 1) {
+        if (data[(y * width + x) * 4 + 3] !== 0) return false;
+      }
+      return true;
+    };
+
+    const copyRow = (fromY: number, toY: number) => {
+      for (let x = 0; x < width; x += 1) {
+        const from = (fromY * width + x) * 4;
+        const to = (toY * width + x) * 4;
+        data[to] = data[from];
+        data[to + 1] = data[from + 1];
+        data[to + 2] = data[from + 2];
+        data[to + 3] = data[from + 3];
+      }
+    };
+
+    const copyColumn = (fromX: number, toX: number) => {
+      for (let y = 0; y < height; y += 1) {
+        const from = (y * width + fromX) * 4;
+        const to = (y * width + toX) * 4;
+        data[to] = data[from];
+        data[to + 1] = data[from + 1];
+        data[to + 2] = data[from + 2];
+        data[to + 3] = data[from + 3];
+      }
+    };
+
+    let top = 0;
+    while (top < height && isRowTransparent(top)) top += 1;
+
+    let bottom = height - 1;
+    while (bottom >= 0 && isRowTransparent(bottom)) bottom -= 1;
+
+    let left = 0;
+    while (left < width && isColumnTransparent(left)) left += 1;
+
+    let right = width - 1;
+    while (right >= 0 && isColumnTransparent(right)) right -= 1;
+
+    if (top >= height || bottom < 0 || left >= width || right < 0) {
+      return canvas;
+    }
+
+    for (let y = 0; y < top; y += 1) {
+      copyRow(top, y);
+    }
+    for (let y = bottom + 1; y < height; y += 1) {
+      copyRow(bottom, y);
+    }
+    for (let x = 0; x < left; x += 1) {
+      copyColumn(left, x);
+    }
+    for (let x = right + 1; x < width; x += 1) {
+      copyColumn(right, x);
+    }
+
+    ctx.putImageData(imageData, 0, 0);
+    return canvas;
+  };
+
   const handleSaveClick = async () => {
     if (!stageRef.current) return;
     
@@ -88,47 +214,51 @@ export const Header = ({ stageRef }: HeaderProps) => {
         finalWidth = Math.round(finalWidth);
         finalHeight = Math.round(finalHeight);
         
-        // Get the cached canvas from the image node
-        // This gives us the filtered image without group transformations
-        const cachedCanvas = (imageNode as any)._cacheCanvas;
-        
-        let dataUrl: string;
-        
-        if (cachedCanvas) {
-            // Create a temporary canvas with the correct output size
-            const tempCanvas = document.createElement('canvas');
-            tempCanvas.width = finalWidth;
-            tempCanvas.height = finalHeight;
-            const ctx = tempCanvas.getContext('2d');
-            
-            if (ctx) {
-                // Set high quality rendering
-                ctx.imageSmoothingEnabled = true;
-                ctx.imageSmoothingQuality = 'high';
-                
-                // Ensure dimensions are integers when drawing to avoid sub-pixel interpolation artifacts
-                ctx.drawImage(
-                    cachedCanvas,
-                    0, 0, Math.round(cachedCanvas.width), Math.round(cachedCanvas.height),
-                    0, 0, finalWidth, finalHeight
-                );
-                
-                // Get the data URL from the temporary canvas
-                dataUrl = tempCanvas.toDataURL(format, quality / 100);
-            } else {
-                // Fallback: use toCanvas if context creation fails
-                const fallbackCanvas = imageNode.toCanvas({
-                    pixelRatio: pixelRatio
-                });
-                dataUrl = fallbackCanvas.toDataURL(format, quality / 100);
-            }
-        } else {
-            // Fallback: use toCanvas if no cache
-            const fallbackCanvas = imageNode.toCanvas({
-                pixelRatio: pixelRatio
-            });
-            dataUrl = fallbackCanvas.toDataURL(format, quality / 100);
+        const hasActiveFilters =
+          config.brightness !== 0 ||
+          config.contrast !== 0 ||
+          config.sharpness > 0 ||
+          Boolean(config.enhancements?.autoEnhance) ||
+          Boolean(config.enhancements?.fillLight) ||
+          Boolean(config.enhancements?.autoWhiteBalance);
+        const hasVisibleBorder = Boolean(config.border && config.border.size > 0);
+        const hasRotation = config.rotation !== 0;
+        const canUseRawImage = !hasActiveFilters && !hasVisibleBorder && !hasRotation;
+
+        const rawImage = imageNode.image() as CanvasImageSource | undefined;
+        const cachedCanvas = (imageNode as any)._cacheCanvas as HTMLCanvasElement | undefined;
+        const source = (canUseRawImage && rawImage)
+          ? rawImage
+          : ((cachedCanvas || imageNode.toCanvas({ pixelRatio })) as CanvasImageSource);
+        const exportedCanvas = sanitizeTransparentEdges(createCanvasFromSource(source, finalWidth, finalHeight));
+
+        const tempCanvas = document.createElement('canvas');
+        tempCanvas.width = finalWidth;
+        tempCanvas.height = finalHeight;
+        const ctx = tempCanvas.getContext('2d');
+
+        if (!ctx) {
+          throw new Error('Failed to create canvas context');
         }
+
+        ctx.imageSmoothingEnabled = true;
+        ctx.imageSmoothingQuality = 'high';
+
+        const isLossy = format === 'image/jpeg' || format === 'image/webp';
+        if (isLossy) {
+          const { border } = config;
+          const bg =
+            (border && border.size > 0 && border.color) ||
+            pickOpaqueEdgeColor(exportedCanvas) ||
+            '#ffffff';
+
+          ctx.fillStyle = bg;
+          ctx.fillRect(0, 0, finalWidth, finalHeight);
+        }
+
+        ctx.drawImage(exportedCanvas, 0, 0, finalWidth, finalHeight);
+
+        const dataUrl = tempCanvas.toDataURL(format, quality / 100);
         
         // Restore visibility
         if (transformer) transformer.visible(transformerVisible);

package/src/store/useImageStore.ts

@@ -73,6 +73,82 @@ interface ImageState {
   reset: () => void;
 }
 
+const sanitizeTransparentEdges = (canvas: HTMLCanvasElement) => {
+  const ctx = canvas.getContext('2d', { willReadFrequently: true } as any) as CanvasRenderingContext2D | null;
+  if (!ctx) return;
+
+  const { width, height } = canvas;
+  if (width <= 1 || height <= 1) return;
+
+  const imageData = ctx.getImageData(0, 0, width, height);
+  const { data } = imageData;
+
+  const isRowTransparent = (y: number) => {
+    for (let x = 0; x < width; x += 1) {
+      if (data[(y * width + x) * 4 + 3] !== 0) return false;
+    }
+    return true;
+  };
+
+  const isColumnTransparent = (x: number) => {
+    for (let y = 0; y < height; y += 1) {
+      if (data[(y * width + x) * 4 + 3] !== 0) return false;
+    }
+    return true;
+  };
+
+  const copyRow = (fromY: number, toY: number) => {
+    for (let x = 0; x < width; x += 1) {
+      const from = (fromY * width + x) * 4;
+      const to = (toY * width + x) * 4;
+      data[to] = data[from];
+      data[to + 1] = data[from + 1];
+      data[to + 2] = data[from + 2];
+      data[to + 3] = data[from + 3];
+    }
+  };
+
+  const copyColumn = (fromX: number, toX: number) => {
+    for (let y = 0; y < height; y += 1) {
+      const from = (y * width + fromX) * 4;
+      const to = (y * width + toX) * 4;
+      data[to] = data[from];
+      data[to + 1] = data[from + 1];
+      data[to + 2] = data[from + 2];
+      data[to + 3] = data[from + 3];
+    }
+  };
+
+  let top = 0;
+  while (top < height && isRowTransparent(top)) top += 1;
+
+  let bottom = height - 1;
+  while (bottom >= 0 && isRowTransparent(bottom)) bottom -= 1;
+
+  let left = 0;
+  while (left < width && isColumnTransparent(left)) left += 1;
+
+  let right = width - 1;
+  while (right >= 0 && isColumnTransparent(right)) right -= 1;
+
+  if (top >= height || bottom < 0 || left >= width || right < 0) return;
+
+  for (let y = 0; y < top; y += 1) {
+    copyRow(top, y);
+  }
+  for (let y = bottom + 1; y < height; y += 1) {
+    copyRow(bottom, y);
+  }
+  for (let x = 0; x < left; x += 1) {
+    copyColumn(left, x);
+  }
+  for (let x = right + 1; x < width; x += 1) {
+    copyColumn(right, x);
+  }
+
+  ctx.putImageData(imageData, 0, 0);
+};
+
 const defaultConfig: ImageConfig = {
   rotation: 0,
   scale: 1,
@@ -171,20 +247,25 @@ export const useImageStore = create<ImageState>((set, get) => ({
     const { previewImage, cropRect, config, originalWidth, originalHeight } = get();
     if (!previewImage || cropRect.width === 0 || cropRect.height === 0) return;
     
+    const roundedCrop = {
+      x: Math.round(cropRect.x),
+      y: Math.round(cropRect.y),
+      width: Math.round(cropRect.width),
+      height: Math.round(cropRect.height)
+    };
+
     const img = new Image();
     img.crossOrigin = 'anonymous';
     img.onload = () => {
       const canvas = document.createElement('canvas');
-      canvas.width = cropRect.width;
-      canvas.height = cropRect.height;
+      canvas.width = roundedCrop.width;
+      canvas.height = roundedCrop.height;
       const ctx = canvas.getContext('2d');
       
       if (ctx) {
-        // High quality smoothing
         ctx.imageSmoothingEnabled = true;
         ctx.imageSmoothingQuality = 'high';
 
-        // 1. Determine actual draw size (handle resize config)
         let drawWidth = originalWidth;
         let drawHeight = originalHeight;
         if (config.resize && config.resize.width > 0 && config.resize.height > 0) {
@@ -192,43 +273,35 @@ export const useImageStore = create<ImageState>((set, get) => ({
             drawHeight = config.resize.height;
         }
 
-        // 2. Calculate border
         const { size = 0, applyHorizontal = true, applyVertical = false, color = '#ffffff' } = config.border || {};
         let borderW = 0;
         let borderH = 0;
         if (size > 0) {
-            if (applyHorizontal) borderW = drawWidth * (size / 100);
-            if (applyVertical) borderH = drawHeight * (size / 100);
+            if (applyHorizontal) borderW = Math.round(drawWidth * (size / 100));
+            if (applyVertical) borderH = Math.round(drawHeight * (size / 100));
         }
         
         const totalWidth = drawWidth + borderW * 2;
         const totalHeight = drawHeight + borderH * 2;
 
-        // 3. Setup centers
         const contentCx = totalWidth / 2;
         const contentCy = totalHeight / 2;
-        
-        // Crop center (relative to Total Content top-left)
-        const cropCx = cropRect.x + cropRect.width / 2;
-        const cropCy = cropRect.y + cropRect.height / 2;
-        
-        // Offset
+        const cropCx = roundedCrop.x + roundedCrop.width / 2;
+        const cropCy = roundedCrop.y + roundedCrop.height / 2;
         const dx = cropCx - contentCx;
         const dy = cropCy - contentCy;
-        
-        // 4. Draw
+
         ctx.translate(canvas.width / 2, canvas.height / 2);
         ctx.translate(-dx, -dy);
         ctx.rotate((config.rotation * Math.PI) / 180);
-        
-        // Draw Border Background
+
         if (borderW > 0 || borderH > 0) {
-            ctx.fillStyle = color;
-            ctx.fillRect(-totalWidth/2, -totalHeight/2, totalWidth, totalHeight);
+          ctx.fillStyle = color;
+          ctx.fillRect(-totalWidth / 2, -totalHeight / 2, totalWidth, totalHeight);
         }
-        
-        // Draw Image (Centered)
-        ctx.drawImage(img, -drawWidth/2, -drawHeight/2, drawWidth, drawHeight);
+
+        ctx.drawImage(img, -drawWidth / 2, -drawHeight / 2, drawWidth, drawHeight);
+        sanitizeTransparentEdges(canvas);
         
         const croppedImage = canvas.toDataURL('image/png');
         
@@ -246,8 +319,8 @@ export const useImageStore = create<ImageState>((set, get) => ({
         const newHistoryItem: HistoryItem = {
             config: newConfig,
             sourceImage: croppedImage,
-            width: cropRect.width,
-            height: cropRect.height
+            width: roundedCrop.width,
+            height: roundedCrop.height
         };
 
         const newHistory = history.slice(0, historyIndex + 1);
@@ -255,8 +328,8 @@ export const useImageStore = create<ImageState>((set, get) => ({
         
         set({
           previewImage: croppedImage,
-          originalWidth: cropRect.width,
-          originalHeight: cropRect.height,
+          originalWidth: roundedCrop.width,
+          originalHeight: roundedCrop.height,
           config: newConfig,
           cropRect: { x: 0, y: 0, width: 0, height: 0 },
           history: newHistory,