fix: 境界線のつぶれを改善

- ピクセル化処理を直接的な平均化アルゴリズムに変更
- エッジ検出（Sobelフィルタ）を追加して境界線を強調
- nearest-neighbor補間を使用してシャープなエッジを保持

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: ayutaz

src/js/app-v3.js

@@ -479,10 +479,14 @@
             canvas.width = settings.outputWidth;
             canvas.height = outputHeight;
 
-            ctx.imageSmoothingEnabled = true;
+            // Use nearest-neighbor scaling for sharper edges
+            ctx.imageSmoothingEnabled = false;
             ctx.drawImage(img, 0, 0, settings.outputWidth, outputHeight);
 
-            const pixelatedCanvas = this.pixelate(canvas, settings.pixelSize);
+            // Apply edge enhancement before pixelation
+            const enhancedCanvas = this.enhanceEdges(canvas);
+            
+            const pixelatedCanvas = this.pixelate(enhancedCanvas, settings.pixelSize);
 
             // Apply custom palette or auto quantization
             const quantizedCanvas = settings.customPalette 
@@ -539,30 +543,116 @@
             return nearestColor;
         }
 
-        pixelate(canvas, pixelSize) {
+        enhanceEdges(canvas) {
             const ctx = canvas.getContext('2d');
+            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+            const data = imageData.data;
             const width = canvas.width;
             const height = canvas.height;
 
-            const scaledWidth = Math.ceil(width / pixelSize);
-            const scaledHeight = Math.ceil(height / pixelSize);
+            // Create a copy for edge detection
+            const edgeData = new Uint8ClampedArray(data);
 
-            const smallCanvas = document.createElement('canvas');
-            smallCanvas.width = scaledWidth;
-            smallCanvas.height = scaledHeight;
-            const smallCtx = smallCanvas.getContext('2d');
+            // Sobel operator for edge detection
+            const sobelX = [-1, 0, 1, -2, 0, 2, -1, 0, 1];
+            const sobelY = [-1, -2, -1, 0, 0, 0, 1, 2, 1];
 
-            smallCtx.imageSmoothingEnabled = true;
-            smallCtx.drawImage(canvas, 0, 0, scaledWidth, scaledHeight);
+            for (let y = 1; y < height - 1; y++) {
+                for (let x = 1; x < width - 1; x++) {
+                    let pixelX = 0;
+                    let pixelY = 0;
+                    
+                    // Apply Sobel operator
+                    for (let j = -1; j <= 1; j++) {
+                        for (let i = -1; i <= 1; i++) {
+                            const idx = ((y + j) * width + (x + i)) * 4;
+                            const gray = data[idx] * 0.299 + data[idx + 1] * 0.587 + data[idx + 2] * 0.114;
+                            const kernelIdx = (j + 1) * 3 + (i + 1);
+                            pixelX += gray * sobelX[kernelIdx];
+                            pixelY += gray * sobelY[kernelIdx];
+                        }
+                    }
+                    
+                    const magnitude = Math.sqrt(pixelX * pixelX + pixelY * pixelY);
+                    const idx = (y * width + x) * 4;
+                    
+                    // Enhance edges by darkening them slightly
+                    if (magnitude > 30) {
+                        const factor = Math.min(1.2, 1 + magnitude / 255);
+                        edgeData[idx] = Math.max(0, data[idx] * 0.8);
+                        edgeData[idx + 1] = Math.max(0, data[idx + 1] * 0.8);
+                        edgeData[idx + 2] = Math.max(0, data[idx + 2] * 0.8);
+                    }
+                }
+            }
 
+            // Create result canvas
             const resultCanvas = document.createElement('canvas');
             resultCanvas.width = width;
             resultCanvas.height = height;
             const resultCtx = resultCanvas.getContext('2d');
+            const resultImageData = resultCtx.createImageData(width, height);
+            resultImageData.data.set(edgeData);
+            resultCtx.putImageData(resultImageData, 0, 0);
 
-            resultCtx.imageSmoothingEnabled = false;
-            resultCtx.drawImage(smallCanvas, 0, 0, width, height);
+            return resultCanvas;
+        }
+
+        pixelate(canvas, pixelSize) {
+            const ctx = canvas.getContext('2d');
+            const width = canvas.width;
+            const height = canvas.height;
+            const imageData = ctx.getImageData(0, 0, width, height);
+            const data = imageData.data;
+            
+            // Create result canvas
+            const resultCanvas = document.createElement('canvas');
+            resultCanvas.width = width;
+            resultCanvas.height = height;
+            const resultCtx = resultCanvas.getContext('2d');
+            const resultImageData = resultCtx.createImageData(width, height);
+            const resultData = resultImageData.data;
+            
+            // Process each pixel block
+            for (let y = 0; y < height; y += pixelSize) {
+                for (let x = 0; x < width; x += pixelSize) {
+                    const blockWidth = Math.min(pixelSize, width - x);
+                    const blockHeight = Math.min(pixelSize, height - y);
+                    
+                    // Calculate average color for this block
+                    let r = 0, g = 0, b = 0, a = 0;
+                    let count = 0;
+                    
+                    for (let dy = 0; dy < blockHeight; dy++) {
+                        for (let dx = 0; dx < blockWidth; dx++) {
+                            const index = ((y + dy) * width + (x + dx)) * 4;
+                            r += data[index];
+                            g += data[index + 1];
+                            b += data[index + 2];
+                            a += data[index + 3];
+                            count++;
+                        }
+                    }
+                    
+                    // Apply average color to entire block
+                    const avgR = Math.round(r / count);
+                    const avgG = Math.round(g / count);
+                    const avgB = Math.round(b / count);
+                    const avgA = Math.round(a / count);
+                    
+                    for (let dy = 0; dy < blockHeight; dy++) {
+                        for (let dx = 0; dx < blockWidth; dx++) {
+                            const index = ((y + dy) * width + (x + dx)) * 4;
+                            resultData[index] = avgR;
+                            resultData[index + 1] = avgG;
+                            resultData[index + 2] = avgB;
+                            resultData[index + 3] = avgA;
+                        }
+                    }
+                }
+            }
 
+            resultCtx.putImageData(resultImageData, 0, 0);
             return resultCanvas;
         }