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

mjpic 1.0.9 → 1.0.19

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 (8) hide show

package/dist/client/assets/index-C6nMBMvY.css +1 -0
package/dist/client/assets/index-Tbz-to9P.js +197 -0
package/dist/client/index.html +2 -2
package/package.json +1 -1
package/src/components/layout/CanvasArea.tsx +145 -50
package/src/components/layout/Header.tsx +82 -32
package/dist/client/assets/index--OgUxz8X.js +0 -197
package/dist/client/assets/index-BoiS81Ei.css +0 -1

package/dist/client/index.html CHANGED Viewed

@@ -6,8 +6,8 @@
     <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--OgUxz8X.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-BoiS81Ei.css">
+    <script type="module" crossorigin src="/assets/index-Tbz-to9P.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-C6nMBMvY.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "mjpic",
   "description": "敏捷图片（mjpic）是一个轻量级网页版图片处理工具，设计灵感来源于光影魔术手。",
-  "version": "1.0.9",
+  "version": "1.0.19",
   "type": "module",
   "bin": {
     "mjpic": "./dist/cli/cli.js"

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

@@ -75,8 +75,9 @@ export const CanvasArea = ({ stageRef }: CanvasAreaProps) => {
         // Use default values to prevent undefined issues
         const { size = 0, applyHorizontal = true, applyVertical = false } = config.border;
         if (size > 0) {
-            if (applyHorizontal) borderW = imgWidth * (size / 100);
-            if (applyVertical) borderH = imgHeight * (size / 100);
+            // Ensure border dimensions are integers to avoid sub-pixel black lines during rendering
+            if (applyHorizontal) borderW = Math.round(imgWidth * (size / 100));
+            if (applyVertical) borderH = Math.round(imgHeight * (size / 100));
         }
     }
@@ -231,7 +232,13 @@ export const CanvasArea = ({ stageRef }: CanvasAreaProps) => {
             filters.push(sharpnessFilter);
         }
-        // Auto Enhance - 全面提升图片质量（优化版本）
+        // Auto Enhance - 智能自适应图片美化
+        // 算法特点：
+        // 1. 基于图像直方图分析，动态生成优化参数
+        // 2. 自适应亮度控制：保护高光，提升暗部
+        // 3. 智能对比度：根据动态范围自适应
+        // 4. 自然饱和度：避免过度饱和
+        // 5. 保持色温不变
         if (config.enhancements?.autoEnhance) {
             // @ts-ignore
             const autoEnhanceFilter = function(imageData) {
@@ -240,71 +247,138 @@ export const CanvasArea = ({ stageRef }: CanvasAreaProps) => {
                 const height = imageData.height;
                 const pixelCount = width * height;
+                // === 第一阶段：图像统计分析 ===
                 // 使用采样来加速统计（每8个像素采样一次）
                 const sampleStep = 8;
-                let sumR = 0, sumG = 0, sumB = 0;
                 let minVal = 255, maxVal = 0;
                 let totalLuminance = 0;
+                let darkPixels = 0, brightPixels = 0; // 暗部和亮部像素统计
                 let sampleCount = 0;
+                // 用于计算色彩分布
+                let sumR = 0, sumG = 0, sumB = 0;
                 for (let i = 0; i < data.length; i += 4 * sampleStep) {
                     const r = data[i], g = data[i+1], b = data[i+2];
-                    sumR += r; sumG += g; sumB += b;
                     const lum = 0.299 * r + 0.587 * g + 0.114 * b;
                     if (lum < minVal) minVal = lum;
                     if (lum > maxVal) maxVal = lum;
                     totalLuminance += lum;
+                    // 统计暗部（<50）和亮部（>200）像素
+                    if (lum < 50) darkPixels++;
+                    if (lum > 200) brightPixels++;
+                    sumR += r; sumG += g; sumB += b;
                     sampleCount++;
                 }
+                const avgLuminance = totalLuminance / sampleCount;
+                const dynamicRange = maxVal - minVal;
+                const darkRatio = darkPixels / sampleCount;
+                const brightRatio = brightPixels / sampleCount;
+                // 计算平均色彩（用于饱和度判断）
                 const avgR = sumR / sampleCount;
                 const avgG = sumG / sampleCount;
                 const avgB = sumB / sampleCount;
-                const avgLuminance = totalLuminance / sampleCount;
+                const avgColorLum = 0.299 * avgR + 0.587 * avgG + 0.114 * avgB;
+                const colorSaturation = (Math.abs(avgR - avgColorLum) + Math.abs(avgG - avgColorLum) + Math.abs(avgB - avgColorLum)) / 3 / 255;
-                // 白平衡校正
-                const wbR = avgG / (avgR || 1);
-                const wbB = avgG / (avgB || 1);
+                // === 第二阶段：动态参数生成 ===
-                // 计算调整参数
-                let brightnessAdjust = 0;
-                if (avgLuminance < 100) brightnessAdjust = (100 - avgLuminance) * 0.15;
-                else if (avgLuminance > 160) brightnessAdjust = -(avgLuminance - 160) * 0.1;
+                // 1. 智能亮度调整（基于图像亮度分布）
+                // 使用曲线映射而非固定增量，保护高光
+                let shadowBoost = 0; // 暗部提升
+                let highlightCompress = 0; // 高光压缩
-                const contrastAdjust = (maxVal - minVal) < 150 ? 15 : 8;
-                const contrastFactor = (259 * (contrastAdjust + 255)) / (255 * (259 - contrastAdjust));
+                if (avgLuminance < 100) {
+                    // 较暗图片：适度提升暗部，保护高光
+                    shadowBoost = 25 + (100 - avgLuminance) * 0.15;
+                    highlightCompress = 0;
+                } else if (avgLuminance > 180) {
+                    // 较亮图片：减少提升，避免过曝
+                    shadowBoost = 10;
+                    highlightCompress = (avgLuminance - 180) * 0.3;
+                } else {
+                    // 正常亮度：温和提升
+                    shadowBoost = 20;
+                    highlightCompress = 0;
+                }
+                // 2. 智能对比度（基于动态范围）
+                // 动态范围小的图片需要更多对比度
+                let contrastAdjust = 0;
+                if (dynamicRange < 100) {
+                    contrastAdjust = 8;
+                } else if (dynamicRange < 150) {
+                    contrastAdjust = 5;
+                } else if (dynamicRange > 200) {
+                    contrastAdjust = -3; // 高动态范围图片，轻微降低对比度
+                }
+                const contrastFactor = contrastAdjust !== 0
+                    ? (259 * (contrastAdjust + 255)) / (255 * (259 - contrastAdjust))
+                    : 1;
-                // 使用采样应用效果
-                const applyStep = 4; // 逐像素处理
+                // 3. 智能饱和度（基于当前饱和度）
+                // 低饱和度图片需要更多提升，高饱和度图片减少提升
+                let saturationBoost = 1.08; // 基础提升8%
+                if (colorSaturation < 0.15) {
+                    saturationBoost = 1.12; // 低饱和度图片提升12%
+                } else if (colorSaturation > 0.4) {
+                    saturationBoost = 1.04; // 高饱和度图片仅提升4%
+                }
+                // === 第三阶段：应用处理 ===
                 for (let i = 0; i < data.length; i += 4) {
-                    // 白平衡
-                    data[i] = Math.min(255, data[i] * wbR);
-                    data[i+2] = Math.min(255, data[i+2] * wbB);
+                    let r = data[i], g = data[i+1], b = data[i+2];
+                    const lum = 0.299 * r + 0.587 * g + 0.114 * b;
-                    // 亮度+对比度
-                    const lum = 0.299 * data[i] + 0.587 * data[i+1] + 0.114 * data[i+2];
-                    const newLum = lum + brightnessAdjust;
-                    const contrastLum = contrastFactor * (newLum - 128) + 128;
-                    const ratio = contrastLum / (lum || 1);
+                    // 步骤1：自适应亮度调整（使用曲线映射）
+                    // 暗部提升多，亮部提升少，保护高光
+                    let brightnessCurve = 0;
+                    if (lum < 80) {
+                        // 暗部：线性提升
+                        brightnessCurve = shadowBoost * (1 - lum / 80 * 0.3);
+                    } else if (lum < 180) {
+                        // 中间调：渐变减少提升
+                        brightnessCurve = shadowBoost * 0.7 * (1 - (lum - 80) / 100 * 0.5);
+                    } else {
+                        // 高光：轻微提升或压缩
+                        brightnessCurve = shadowBoost * 0.35 - highlightCompress * ((lum - 180) / 75);
+                    }
+                    r = Math.min(255, Math.max(0, r + brightnessCurve));
+                    g = Math.min(255, Math.max(0, g + brightnessCurve));
+                    b = Math.min(255, Math.max(0, b + brightnessCurve));
-                    data[i] = Math.min(255, data[i] * ratio);
-                    data[i+1] = Math.min(255, data[i+1] * ratio);
-                    data[i+2] = Math.min(255, data[i+2] * ratio);
+                    // 步骤2：对比度调整（以128为中心）
+                    if (contrastFactor !== 1) {
+                        r = Math.min(255, Math.max(0, contrastFactor * (r - 128) + 128));
+                        g = Math.min(255, Math.max(0, contrastFactor * (g - 128) + 128));
+                        b = Math.min(255, Math.max(0, contrastFactor * (b - 128) + 128));
+                    }
+                    // 步骤3：饱和度提升（保持色温）
+                    const gray = 0.299 * r + 0.587 * g + 0.114 * b;
+                    r = Math.min(255, Math.max(0, gray + (r - gray) * saturationBoost));
+                    g = Math.min(255, Math.max(0, gray + (g - gray) * saturationBoost));
+                    b = Math.min(255, Math.max(0, gray + (b - gray) * saturationBoost));
-                    // 饱和度提升
-                    const gray = 0.299 * data[i] + 0.587 * data[i+1] + 0.114 * data[i+2];
-                    const sat = 1.15;
-                    data[i] = Math.min(255, gray + (data[i] - gray) * sat);
-                    data[i+1] = Math.min(255, gray + (data[i+1] - gray) * sat);
-                    data[i+2] = Math.min(255, gray + (data[i+2] - gray) * sat);
+                    data[i] = r;
+                    data[i+1] = g;
+                    data[i+2] = b;
                 }
-                // 简化锐化（只处理边缘像素）
+                // === 第四阶段：智能锐化 ===
+                // 根据图像内容自适应锐化强度
+                const sharpnessAmount = dynamicRange < 100 ? 0.25 : 0.2;
                 const oldData = new Uint8ClampedArray(data);
-                const sharpenAmount = 0.3;
-                const center = 1 + 4 * sharpenAmount;
-                const neighbor = -sharpenAmount;
+                const center = 1 + 4 * sharpnessAmount;
+                const neighbor = -sharpnessAmount;
+                // 隔行隔列采样处理，提升性能
                 for (let y = 1; y < height - 1; y += 2) {
                     for (let x = 1; x < width - 1; x += 2) {
                         const idx = (y * width + x) * 4;
@@ -614,16 +688,18 @@ export const CanvasArea = ({ stageRef }: CanvasAreaProps) => {
           {image && (
             <Group
                 id="content-group"
-                x={stageSize.width / 2}
-                y={stageSize.height / 2}
+                // Use Math.round to avoid sub-pixel positioning which causes antialiasing black lines on borders
+                x={Math.round(stageSize.width / 2)}
+                y={Math.round(stageSize.height / 2)}
                 rotation={config.rotation}
             >
                 {(displayBorderW > 0 || displayBorderH > 0) && (
                     <Rect
-                        width={displayWidth + displayBorderW * 2}
-                        height={displayHeight + displayBorderH * 2}
-                        offsetX={(displayWidth + displayBorderW * 2) / 2}
-                        offsetY={(displayHeight + displayBorderH * 2) / 2}
+                        // Round up border dimensions to ensure full coverage
+                        width={Math.ceil(displayWidth + displayBorderW * 2)}
+                        height={Math.ceil(displayHeight + displayBorderH * 2)}
+                        offsetX={Math.round((displayWidth + displayBorderW * 2) / 2)}
+                        offsetY={Math.round((displayHeight + displayBorderH * 2) / 2)}
                         fill={config.border?.color || '#ffffff'}
                         listening={false}
                     />
@@ -638,8 +714,8 @@ export const CanvasArea = ({ stageRef }: CanvasAreaProps) => {
                   height={imgHeight}
                   scaleX={scale}
                   scaleY={scale}
-                  offsetX={imgWidth / 2}
-                  offsetY={imgHeight / 2}
+                  offsetX={Math.round(imgWidth / 2)}
+                  offsetY={Math.round(imgHeight / 2)}
                 />
             </Group>
           )}
@@ -818,10 +894,11 @@ export const CanvasArea = ({ stageRef }: CanvasAreaProps) => {
                 anchorStroke="#3b82f6"
                 anchorFill="#3b82f6"
                 anchorSize={8}
-                enabledAnchors={isFreeCrop
-                  ? ['top-left', 'top-right', 'bottom-left', 'bottom-right', 'middle-left', 'middle-right', 'top-center', 'bottom-center']
-                  : ['top-left', 'top-right', 'bottom-left', 'bottom-right']
-                }
+                // 所有裁剪模式都支持 8 个方向的手柄，方便对称裁剪
+                enabledAnchors={[
+                  'top-left', 'top-right', 'bottom-left', 'bottom-right',
+                  'top-center', 'bottom-center', 'middle-left', 'middle-right'
+                ]}
                 boundBoxFunc={(oldBox, newBox) => {
                   if (newBox.width < 20 || newBox.height < 20) {
                     return oldBox;
@@ -840,6 +917,24 @@ export const CanvasArea = ({ stageRef }: CanvasAreaProps) => {
                     }
                   }
+                  // 检测正在使用的手柄，保持中心位置不变
+                  const transformerInstance = transformerRef.current;
+                  if (transformerInstance) {
+                    const activeAnchor = transformerInstance.getActiveAnchor();
+                    if (activeAnchor === 'top-center' || activeAnchor === 'bottom-center') {
+                      // 使用上/下手柄时，保持水平中心位置不变
+                      const oldCenterX = oldBox.x + oldBox.width / 2;
+                      const newCenterX = newBox.x + newBox.width / 2;
+                      newBox.x += oldCenterX - newCenterX;
+                    } else if (activeAnchor === 'middle-left' || activeAnchor === 'middle-right') {
+                      // 使用左/右手柄时，保持垂直中心位置不变
+                      const oldCenterY = oldBox.y + oldBox.height / 2;
+                      const newCenterY = newBox.y + newBox.height / 2;
+                      newBox.y += oldCenterY - newCenterY;
+                    }
+                  }
                   const relX = newBox.x - contentX;
                   const relY = newBox.y - contentY;
                   if (relX < -5 || relY < -5 ||

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

@@ -40,53 +40,103 @@ export const Header = ({ stageRef }: HeaderProps) => {
     try {
         // Get the current state from the image store
-        const { previewImage, config, originalWidth, originalHeight } = useImageStore.getState();
+        const { config, originalWidth, originalHeight } = useImageStore.getState();
-        if (!previewImage) {
+        // Find the image node to get actual dimensions
+        const imageNode = stageRef.current.findOne('Image') as Konva.Image;
+        if (!imageNode) {
             console.error('No image found to save');
             return;
         }
         // Determine the final dimensions based on resize config
-        let finalWidth = originalWidth || 800;
-        let finalHeight = originalHeight || 600;
+        let finalWidth = originalWidth || imageNode.width();
+        let finalHeight = originalHeight || imageNode.height();
         if (config.resize && config.resize.width > 0 && config.resize.height > 0) {
             finalWidth = config.resize.width;
             finalHeight = config.resize.height;
         }
-        // Create a temporary canvas with the correct dimensions
-        const canvas = document.createElement('canvas');
-        canvas.width = finalWidth;
-        canvas.height = finalHeight;
-        const ctx = canvas.getContext('2d');
+        // Ensure finalWidth and finalHeight are integers to prevent sub-pixel rendering issues (black lines)
+        finalWidth = Math.round(finalWidth);
+        finalHeight = Math.round(finalHeight);
-        if (!ctx) {
-            console.error('Failed to create canvas context');
-            return;
+        // Calculate the pixel ratio needed to get the correct output size
+        const pixelRatio = finalWidth / imageNode.width();
+        // Hide other elements temporarily to only capture the image
+        const transformer = stageRef.current.findOne('Transformer');
+        const cropGroup = stageRef.current.findOne('#crop-group');
+        const rotationGrid = stageRef.current.findOne('#rotation-grid');
+        const transformerVisible = transformer?.visible();
+        const cropGroupVisible = cropGroup?.visible();
+        const rotationGridVisible = rotationGrid?.visible();
+        if (transformer) transformer.visible(false);
+        if (cropGroup) cropGroup.visible(false);
+        if (rotationGrid) rotationGrid.visible(false);
+        // Force a redraw
+        stageRef.current.batchDraw();
+        // Wait a bit for the render to complete
+        await new Promise(resolve => setTimeout(resolve, 50));
+        // Ensure finalWidth and finalHeight are integers to prevent sub-pixel rendering issues (black lines)
+        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);
         }
-        // Set high quality rendering
-        ctx.imageSmoothingEnabled = true;
-        ctx.imageSmoothingQuality = 'high';
-        // Load the preview image as the source
-        const img = new Image();
-        img.crossOrigin = 'anonymous';
-        await new Promise<void>((resolve, reject) => {
-            img.onload = () => {
-                // Draw the image with the correct dimensions
-                ctx.drawImage(img, 0, 0, finalWidth, finalHeight);
-                resolve();
-            };
-            img.onerror = reject;
-            img.src = previewImage;
-        });
-        // Convert canvas to data URL with correct quality
-        const dataUrl = canvas.toDataURL(format, quality / 100);
+        // Restore visibility
+        if (transformer) transformer.visible(transformerVisible);
+        if (cropGroup) cropGroup.visible(cropGroupVisible);
+        if (rotationGrid) rotationGrid.visible(rotationGridVisible);
+        // Force another redraw
+        stageRef.current.batchDraw();
         // Check if we are in CLI mode with an opened file
         // If savePath is provided (from dialog), use it