بخش تقسیم عکس به تکه های کوچک رو بازنویسی کن

script.js

@@ -98,7 +98,6 @@ let uploadedImage = null;
         
         previewContainer.appendChild(canvas);
     }
-    
     function generatePosterPages() {
         if (!uploadedImage) return;
         
@@ -112,7 +111,7 @@ let uploadedImage = null;
         const showGuides = showGrid.checked;
         const centerOverlaps = centerOverlap.checked;
         
-        // Calculate the size of each segment
+        // Calculate the size of each segment including overlaps
         const segmentWidth = uploadedImage.width / gridSize;
         const segmentHeight = uploadedImage.height / gridSize;
         
@@ -124,6 +123,7 @@ let uploadedImage = null;
                 pageDiv.className = 'poster-page relative';
                 
                 const canvas = document.createElement('canvas');
+                const ctx = canvas.getContext('2d');
                 
                 // Set canvas dimensions based on orientation
                 if (orient === 'landscape') {
@@ -133,38 +133,22 @@ let uploadedImage = null;
                     canvas.width = 595; // A4 width in pixels at 72dpi
                     canvas.height = 842; // A4 height in pixels at 72dpi
                 }
+
+                // Calculate source rectangle with overlaps
+                let sx = Math.max(0, col * segmentWidth - (col > 0 ? overlapXPx/2 : 0));
+                let sy = Math.max(0, row * segmentHeight - (row > 0 ? overlapYPx/2 : 0));
+                let sw = segmentWidth + (col === 0 || col === gridSize-1 ? overlapXPx/2 : overlapXPx);
+                let sh = segmentHeight + (row === 0 || row === gridSize-1 ? overlapYPx/2 : overlapYPx);
                 
-                const ctx = canvas.getContext('2d');
-                // Calculate source rectangle with proper overlap handling
-                let sx, sy, sw, sh;
-                
-                if (orient === 'diagonal') {
-                    // Diagonal orientation - rotate source rectangle
-                    const centerX = (col + 0.5) * segmentWidth;
-                    const centerY = (row + 0.5) * segmentHeight;
-                    const radius = Math.sqrt(segmentWidth*segmentWidth + segmentHeight*segmentHeight)/2;
-                    
-                    sx = centerX - radius;
-                    sy = centerY - radius;
-                    sw = radius * 2;
-                    sh = radius * 2;
-                } else {
-                    // Standard orientation
-                // Calculate source rectangle without overlaps
-                sx = col * segmentWidth;
-                sy = row * segmentHeight;
-                sw = segmentWidth;
-                sh = segmentHeight;
-}
                 // Ensure we stay within image bounds
-                sx = Math.max(0, sx);
-                sy = Math.max(0, sy);
                 sw = Math.min(sw, uploadedImage.width - sx);
                 sh = Math.min(sh, uploadedImage.height - sy);
-// Draw the image segment with border
+
+                // Draw the image segment
                 ctx.save();
+                
                 if (orient === 'diagonal') {
-                    // For diagonal orientation, rotate the canvas
+                    // Diagonal orientation
                     ctx.translate(canvas.width/2, canvas.height/2);
                     ctx.rotate(Math.PI/4);
                     ctx.drawImage(
@@ -172,69 +156,71 @@ let uploadedImage = null;
                         sx, sy, sw, sh,
                         -canvas.width/2, -canvas.height/2, canvas.width, canvas.height
                     );
-                    ctx.setTransform(1, 0, 0, 1, 0, 0);
                 } else {
-                    // Standard orientation
-                    // Calculate destination rectangle with proper aspect ratio
-                    const destWidth = canvas.width;
-                    const destHeight = canvas.height;
+                    // Standard orientation (portrait or landscape)
+                    // Maintain aspect ratio while filling canvas
+                    const imgRatio = sw / sh;
+                    const canvasRatio = canvas.width / canvas.height;
+                    
+                    let drawWidth, drawHeight, offsetX = 0, offsetY = 0;
+                    
+                    if (imgRatio > canvasRatio) {
+                        // Image is wider than canvas - fill width
+                        drawWidth = canvas.width;
+                        drawHeight = canvas.width / imgRatio;
+                        offsetY = (canvas.height - drawHeight) / 2;
+                    } else {
+                        // Image is taller than canvas - fill height
+                        drawHeight = canvas.height;
+                        drawWidth = canvas.height * imgRatio;
+                        offsetX = (canvas.width - drawWidth) / 2;
+                    }
                     
-                    // Adjust destination position based on any out-of-bounds
-                    const destX = -dx * (destWidth / sw);
-                    const destY = -dy * (destHeight / sh);
-                    // Draw image to fill entire canvas without gaps
                     ctx.drawImage(
                         uploadedImage,
                         sx, sy, sw, sh,
-                        0, 0, canvas.width, canvas.height
+                        offsetX, offsetY, drawWidth, drawHeight
                     );
-}
-                // Draw border around the image segment
-                ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)';
-                ctx.lineWidth = 2;
-                
-                if (orient === 'portrait' || orient === 'landscape') {
-                    const borderX = dx > 0 ? dx * (canvas.width / sw) : 0;
-                    const borderY = dy > 0 ? dy * (canvas.height / sh) : 0;
-                    const borderWidth = canvas.width * (sw / (sw + dx));
-                    const borderHeight = canvas.height * (sh / (sh + dy));
-                    ctx.strokeRect(borderX, borderY, borderWidth, borderHeight);
-                } else {
-                    ctx.strokeRect(0, 0, canvas.width, canvas.height);
                 }
-                // Draw border around the entire canvas
-                ctx.strokeStyle = 'rgba(0, 0, 0, 0.5)';
-                ctx.lineWidth = 2;
-                ctx.strokeRect(0, 0, canvas.width, canvas.height);
-ctx.restore();
-// Add cutting guides if enabled
+
+                // Draw cutting guides if enabled
                 if (showGuides) {
-                    const guideSize = 20;
-                    
-                    // Top guide
-                    if (row > 0) {
-                        const topGuide = document.createElement('div');
-                        topGuide.className = 'cutting-guide';
-                        topGuide.style.top = '0';
-                        topGuide.style.left = '0';
-                        topGuide.style.width = '100%';
-                        topGuide.style.height = `${guideSize}px`;
-                        pageDiv.appendChild(topGuide);
-                    }
+                    ctx.strokeStyle = 'rgba(255, 0, 0, 0.7)';
+                    ctx.lineWidth = 2;
                     
-                    // Left guide
-                    if (col > 0) {
-                        const leftGuide = document.createElement('div');
-                        leftGuide.className = 'cutting-guide';
-                        leftGuide.style.top = '0';
-                        leftGuide.style.left = '0';
-                        leftGuide.style.width = `${guideSize}px`;
-                        leftGuide.style.height = '100%';
-                        pageDiv.appendChild(leftGuide);
+                    if (orient === 'portrait' || orient === 'landscape') {
+                        // Draw border for overlap areas
+                        const borderX = 10;
+                        const borderY = 10;
+                        const borderWidth = canvas.width - 20;
+                        const borderHeight = canvas.height - 20;
+                        ctx.strokeRect(borderX, borderY, borderWidth, borderHeight);
+                        
+                        // Draw center marks
+                        ctx.beginPath();
+                        ctx.moveTo(canvas.width/2 - 15, canvas.height/2);
+                        ctx.lineTo(canvas.width/2 + 15, canvas.height/2);
+                        ctx.moveTo(canvas.width/2, canvas.height/2 - 15);
+                        ctx.lineTo(canvas.width/2, canvas.height/2 + 15);
+                        ctx.stroke();
                     }
                 }
+
+                // Draw border around the entire canvas
+                ctx.strokeStyle = 'rgba(0, 0, 0, 0.5)';
+                ctx.lineWidth = 2;
+                ctx.strokeRect(0, 0, canvas.width, canvas.height);
+                
+                ctx.restore();
+
+                // Add page number
+                const pageNumDiv = document.createElement('div');
+                pageNumDiv.className = 'absolute top-2 right-2 bg-white bg-opacity-80 px-2 py-1 rounded text-sm font-bold';
+                pageNumDiv.textContent = pageNumber;
+                pageDiv.appendChild(pageNumDiv);
+
                 // Add canvas to page
-pageDiv.appendChild(canvas);
+                pageDiv.appendChild(canvas);
                 posterPages.appendChild(pageDiv);
             }
         }
@@ -242,8 +228,7 @@ pageDiv.appendChild(canvas);
         // Scroll to results
         resultsSection.scrollIntoView({ behavior: 'smooth' });
     }
-    
-    function printAllPages() {
+function printAllPages() {
         window.print();
     }