npm - mjpic - Versions diffs - 1.0.19 → 1.0.20 - Mend

mjpic 1.0.19 → 1.0.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/client/assets/{index-Tbz-to9P.js → index-BJ_kQgaS.js} +23 -23
package/dist/client/index.html +1 -1
package/package.json +1 -2
package/src/components/layout/CanvasArea.tsx +8 -8
package/src/components/layout/Header.tsx +71 -40
package/src/store/useImageStore.ts +23 -27

package/dist/client/index.html CHANGED Viewed

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="敏捷图片（mjpic）是一个轻量级网页版图片处理工具，设计灵感来源于光影魔术手。" />
     <title>敏捷图片 (mjpic) - 轻量级网页版图片处理工具</title>
-    <script type="module" crossorigin src="/assets/index-Tbz-to9P.js"></script>
+    <script type="module" crossorigin src="/assets/index-BJ_kQgaS.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-C6nMBMvY.css">
   </head>
   <body>

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "mjpic",
   "description": "敏捷图片（mjpic）是一个轻量级网页版图片处理工具，设计灵感来源于光影魔术手。",
-  "version": "1.0.19",
+  "version": "1.0.20",
   "type": "module",
   "bin": {
     "mjpic": "./dist/cli/cli.js"
@@ -30,7 +30,6 @@
     "i18next-browser-languagedetector": "^8.2.1",
     "konva": "^9.3.16",
     "lucide-react": "^0.511.0",
-    "mjpic": "^1.0.7",
     "open": "^11.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

package/src/components/layout/CanvasArea.tsx CHANGED Viewed

@@ -760,8 +760,8 @@ export const CanvasArea = ({ stageRef }: CanvasAreaProps) => {
                 }}
                 onDragMove={(e) => {
                   const node = e.target;
-                  const newX = (node.x() - contentX) / scale;
-                  const newY = (node.y() - contentY) / scale;
+                  const newX = Math.round((node.x() - contentX) / scale);
+                  const newY = Math.round((node.y() - contentY) / scale);
                   pendingCropRectRef.current = { ...cropRect, x: newX, y: newY };
                   if (cropDragRafRef.current !== null) return;
@@ -782,8 +782,8 @@ export const CanvasArea = ({ stageRef }: CanvasAreaProps) => {
                   pendingCropRectRef.current = null;
                   const node = e.target;
-                  const newX = (node.x() - contentX) / scale;
-                  const newY = (node.y() - contentY) / scale;
+                  const newX = Math.round((node.x() - contentX) / scale);
+                  const newY = Math.round((node.y() - contentY) / scale);
                   setCropRect({ ...cropRect, x: newX, y: newY });
                   requestAnimationFrame(() => {
@@ -829,14 +829,14 @@ export const CanvasArea = ({ stageRef }: CanvasAreaProps) => {
                   // Constrain to TOTAL width/height
                   const maxX = totalWidth - newWidth / scale;
                   const maxY = totalHeight - newHeight / scale;
-                  const newX = Math.min(Math.max(0, (node.x() - contentX) / scale), maxX);
-                  const newY = Math.min(Math.max(0, (node.y() - contentY) / scale), maxY);
+                  const newX = Math.round(Math.min(Math.max(0, (node.x() - contentX) / scale), maxX));
+                  const newY = Math.round(Math.min(Math.max(0, (node.y() - contentY) / scale), maxY));
                   setCropRect({
                     x: newX,
                     y: newY,
-                    width: newWidth / scale,
-                    height: newHeight / scale
+                    width: Math.round(newWidth / scale),
+                    height: Math.round(newHeight / scale)
                   });
                   requestAnimationFrame(() => {

package/src/components/layout/Header.tsx CHANGED Viewed

@@ -15,6 +15,38 @@ 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 handleSaveClick = async () => {
     if (!stageRef.current) return;
@@ -88,47 +120,46 @@ 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 cachedCanvas = (imageNode as any)._cacheCanvas as HTMLCanvasElement | undefined;
+        const srcCanvas = (cachedCanvas || imageNode.toCanvas({ pixelRatio })) as HTMLCanvasElement;
+        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) ||
+            (cachedCanvas ? pickOpaqueEdgeColor(cachedCanvas) : null) ||
+            '#ffffff';
+          ctx.fillStyle = bg;
+          ctx.fillRect(0, 0, finalWidth, finalHeight);
+        }
+        ctx.drawImage(
+          srcCanvas,
+          0,
+          0,
+          Math.round(srcCanvas.width || finalWidth),
+          Math.round(srcCanvas.height || finalHeight),
+          0,
+          0,
+          finalWidth,
+          finalHeight
+        );
+        const dataUrl = tempCanvas.toDataURL(format, quality / 100);
         // Restore visibility
         if (transformer) transformer.visible(transformerVisible);

package/src/store/useImageStore.ts CHANGED Viewed

@@ -171,20 +171,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 +197,34 @@ 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);
         const croppedImage = canvas.toDataURL('image/png');
@@ -246,8 +242,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 +251,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,