صفحات ایجاد شده کامل نیست و برخی قسمت های عکس در صفحات نیست

script.js

@@ -135,8 +135,7 @@ let uploadedImage = null;
                 }
                 
                 const ctx = canvas.getContext('2d');
-                
-                // Calculate source rectangle with overlap
+                // Calculate source rectangle with proper overlap handling
                 let sx, sy, sw, sh;
                 
                 if (orient === 'diagonal') {
@@ -152,25 +151,36 @@ let uploadedImage = null;
                 } else {
                     // Standard orientation
                     if (centerOverlaps) {
-                        // Center overlaps evenly around all edges
-                        sx = col * segmentWidth - overlapXPx/2;
-                        sy = row * segmentHeight - overlapYPx/2;
-                        sw = segmentWidth + overlapXPx;
-                        sh = segmentHeight + overlapYPx;
+                        // Center overlaps - add equal overlap on all sides
+                        sx = col * segmentWidth - overlapXPx;
+                        sy = row * segmentHeight - overlapYPx;
+                        sw = segmentWidth + overlapXPx * 2;
+                        sh = segmentHeight + overlapYPx * 2;
                     } else {
-                        // Overlaps only on right/bottom (traditional)
-                        sx = Math.max(0, col * segmentWidth - overlapXPx);
-                        sy = Math.max(0, row * segmentHeight - overlapYPx);
-                        sw = Math.min(uploadedImage.width - sx, segmentWidth + (col > 0 ? overlapXPx : 0) + (col < gridSize-1 ? overlapXPx : 0));
-                        sh = Math.min(uploadedImage.height - sy, segmentHeight + (row > 0 ? overlapYPx : 0) + (row < gridSize-1 ? overlapYPx : 0));
+                        // Traditional overlaps - add overlap to right and bottom only
+                        sx = col * segmentWidth;
+                        sy = row * segmentHeight;
+                        sw = segmentWidth + (col < gridSize-1 ? overlapXPx : 0);
+                        sh = segmentHeight + (row < gridSize-1 ? overlapYPx : 0);
                     }
                 }
+                // Adjust source rectangle to stay within image bounds
+                let dx = 0, dy = 0;
                 
-                // Ensure we don't go outside image bounds
-                sx = Math.max(0, sx);
-                sy = Math.max(0, sy);
-                sw = Math.min(uploadedImage.width - sx, sw);
-                sh = Math.min(uploadedImage.height - sy, sh);
+                if (sx < 0) {
+                    dx = -sx;
+                    sw += sx;
+                    sx = 0;
+                }
+                if (sy < 0) {
+                    dy = -sy;
+                    sh += sy;
+                    sy = 0;
+                }
+                
+                // Adjust width/height if extending beyond image
+                sw = Math.min(sw, uploadedImage.width - sx);
+                sh = Math.min(sh, uploadedImage.height - sy);
                 // Draw the image segment with border
                 ctx.save();
                 if (orient === 'diagonal') {
@@ -185,19 +195,36 @@ let uploadedImage = null;
                     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;
+                    
+                    // Adjust destination position based on any out-of-bounds
+                    const destX = -dx * (destWidth / sw);
+                    const destY = -dy * (destHeight / sh);
+                    
                     ctx.drawImage(
                         uploadedImage,
                         sx, sy, sw, sh,
-                        0, 0, canvas.width, canvas.height
+                        destX, destY, 
+                        destWidth * (sw / (sw + dx)), 
+                        destHeight * (sh / (sh + dy))
                     );
                 }
-
                 // Draw border around the image segment
                 ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)';
                 ctx.lineWidth = 2;
-                ctx.strokeRect(0, 0, canvas.width, canvas.height);
-
-                // Draw overlap indicators
+                
+                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 overlap indicators
                 ctx.strokeStyle = 'rgba(0, 0, 255, 0.5)';
                 ctx.lineWidth = 1;
                 ctx.setLineDash([5, 5]);