Promote version 00280b6 to main

Promoted commit 00280b6865beec9d88db8b33e7086d07f5f73caf to main branch

index.html

@@ -23,8 +23,8 @@
                         <i data-feather="upload" class="w-12 h-12 mx-auto text-gray-400 mb-3"></i>
                         <p class="text-gray-600 mb-2">Drag & drop your image here</p>
                         <p class="text-sm text-gray-500 mb-4">or</p>
-                        <input type="file" id="imageUpload" accept="image/jpeg,image/png,image/gif" class="hidden">
-<button id="uploadBtn" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition-colors">
+                        <input type="file" id="imageUpload" accept="image/*" class="hidden">
+                        <button id="uploadBtn" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition-colors">
                             Select Image
                         </button>
                     </div>
@@ -99,7 +99,7 @@
                         <i data-feather="printer" class="inline mr-2"></i> Print All Pages
                     </button>
                     <button id="downloadAllBtn" class="bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-lg transition-colors">
-                        <i data-feather="download" class="inline mr-2"></i> Download All as PDF11
+                        <i data-feather="download" class="inline mr-2"></i> Download All as PDF
                     </button>
                     <button id="resetBtn" class="bg-gray-600 hover:bg-gray-700 text-white font-medium py-2 px-4 rounded-lg transition-colors">
                         <i data-feather="refresh-cw" class="inline mr-2"></i> Start Over

script.js

@@ -32,22 +32,12 @@ let uploadedImage = null;
     // Functions
     function handleImageUpload(e) {
         const file = e.target.files[0];
-        if (file) {
-            // Check if file is an image
-            if (!file.type.match('image.*')) {
-                alert('Please select a valid image file (JPEG, PNG, GIF, etc.)');
-                return;
-            }
-            
-            // Reset any previous upload
-            uploadedImage = null;
-            generateBtn.disabled = true;
-            
-            // Process the new image
+        if (file && file.type.match('image.*')) {
             processImageFile(file);
         }
     }
-function handleDragOver(e) {
+    
+    function handleDragOver(e) {
         e.preventDefault();
         e.stopPropagation();
         dropZone.classList.add('drag-over');
@@ -69,376 +59,253 @@ function handleDragOver(e) {
             processImageFile(file);
         }
     }
+    
     function processImageFile(file) {
         const reader = new FileReader();
-        reader.onloadstart = function() {
-            previewContainer.innerHTML = '<div class="text-center"><i data-feather="loader" class="w-8 h-8 mx-auto animate-spin text-gray-400"></i><p class="text-gray-600 mt-2">Loading image...</p></div>';
-            feather.replace();
-        };
-
         reader.onload = function(e) {
-            previewContainer.innerHTML = ''; // Clear loading message
-            
             uploadedImage = new Image();
-            uploadedImage.crossOrigin = 'Anonymous'; // Handle CORS if needed
-            
             uploadedImage.onload = function() {
-                // Create canvas for preview
-                const canvas = document.createElement('canvas');
-                const ctx = canvas.getContext('2d');
-                
-                // Calculate dimensions to fit in preview area
-                const maxWidth = 400;
-                const maxHeight = 300;
-                let width = uploadedImage.width;
-                let height = uploadedImage.height;
-                
-                if (width > maxWidth) {
-                    const ratio = maxWidth / width;
-                    width = maxWidth;
-                    height = height * ratio;
-                }
-                
-                if (height > maxHeight) {
-                    const ratio = maxHeight / height;
-                    height = maxHeight;
-                    width = width * ratio;
-                }
-                
-                canvas.width = width;
-                canvas.height = height;
-                
-                // Draw image
-                ctx.drawImage(uploadedImage, 0, 0, width, height);
-                
-                // Add canvas to preview container
-                canvas.className = 'max-w-full h-auto border border-gray-200 rounded';
-                previewContainer.appendChild(canvas);
-                
-                // Enable generate button
+                displayPreview(uploadedImage);
                 generateBtn.disabled = false;
-                feather.replace();
             };
-            
-            uploadedImage.onerror = function() {
-                previewContainer.innerHTML = '<div class="text-center text-red-500"><i data-feather="alert-triangle" class="w-8 h-8 mx-auto"></i><p class="mt-2">Error loading image. Please try another file.</p></div>';
-                generateBtn.disabled = true;
-                feather.replace();
-            };
-            
             uploadedImage.src = e.target.result;
-            imageUpload.value = ''; // Reset input to allow same file to be selected again
-        };
-        
-        reader.onerror = function() {
-            previewContainer.innerHTML = '<div class="text-center text-red-500"><i data-feather="alert-triangle" class="w-8 h-8 mx-auto"></i><p class="mt-2">Error reading file. Please try again.</p></div>';
-            generateBtn.disabled = true;
-            feather.replace();
         };
-        
         reader.readAsDataURL(file);
     }
-    }
-
+    
     function displayPreview(image) {
-previewContainer.innerHTML = '';
+        previewContainer.innerHTML = '';
         
         const canvas = document.createElement('canvas');
-        canvas.className = 'max-w-full h-auto border border-gray-200 rounded';
         const ctx = canvas.getContext('2d');
-        
-        // Calculate dimensions to fit in preview area
         const maxWidth = 400;
         const maxHeight = 300;
         let width = image.width;
         let height = image.height;
         
         if (width > maxWidth) {
-            const ratio = maxWidth / width;
+            height = (maxWidth / width) * height;
             width = maxWidth;
-            height = height * ratio;
         }
-        
         if (height > maxHeight) {
-            const ratio = maxHeight / height;
+            width = (maxHeight / height) * width;
             height = maxHeight;
-            width = width * ratio;
         }
         
         canvas.width = width;
         canvas.height = height;
-        
-        // Draw image
         ctx.drawImage(image, 0, 0, width, height);
         
-        // Draw grid lines only if image is loaded successfully
-        try {
-            const pages = parseInt(pageCount.value);
-            const gridSize = Math.sqrt(pages);
-            const cellWidth = width / gridSize;
-            const cellHeight = height / gridSize;
-            
-            ctx.strokeStyle = 'rgba(255, 0, 0, 0.7)';
-            ctx.lineWidth = 2;
-            
-            // Draw vertical lines
-            for (let i = 1; i < gridSize; i++) {
-                ctx.beginPath();
-                ctx.moveTo(i * cellWidth, 0);
-                ctx.lineTo(i * cellWidth, height);
-                ctx.stroke();
-            }
-            
-            // Draw horizontal lines
-            for (let i = 1; i < gridSize; i++) {
-                ctx.beginPath();
-                ctx.moveTo(0, i * cellHeight);
-                ctx.lineTo(width, i * cellHeight);
-                ctx.stroke();
-            }
-        } catch (error) {
-            console.error('Error drawing grid:', error);
-        }
-        
         previewContainer.appendChild(canvas);
-        
-        // Update grid whenever page count changes
-        pageCount.addEventListener('change', function() {
-            if (uploadedImage) {
-                displayPreview(uploadedImage);
-            }
-        });
     }
-function generatePosterPages() {
-    if (!uploadedImage) return;
-    
-    posterPages.innerHTML = '';
-    resultsSection.classList.remove('hidden');
     
-    const pages = parseInt(pageCount.value);
-    const gridSize = Math.sqrt(pages);
-    const orient = orientation.value;
-    const overlapXPx = (parseInt(overlapX.value) / 25.4) * 96; // Convert mm to pixels (96dpi)
-    const overlapYPx = (parseInt(overlapY.value) / 25.4) * 96; // Convert mm to pixels (96dpi)
-    const showGuides = showGrid.checked;
-    const centerOverlaps = centerOverlap.checked;
-    
-    // Base segment dimensions without overlap
-    const baseSegmentWidth = uploadedImage.width / gridSize;
-    const baseSegmentHeight = uploadedImage.height / gridSize;
-    
-    // Create a canvas for each page
-    for (let row = 0; row < gridSize; row++) {
-        for (let col = 0; col < gridSize; col++) {
-            const pageNumber = row * gridSize + col + 1;
-            const pageDiv = document.createElement('div');
-            pageDiv.className = 'poster-page relative';
-            
-            const canvas = document.createElement('canvas');
-            
-            // Set canvas dimensions based on orientation
-            if (orient === 'landscape') {
-                canvas.width = 842; // A4 landscape width in pixels (297mm)
-                canvas.height = 595; // A4 landscape height in pixels (210mm)
-            } else if (orient === 'diagonal') {
-                // For diagonal, use portrait dimensions but we'll rotate
-                canvas.width = 595; 
-                canvas.height = 842;
-            } else {
-                // Portrait by default
-                canvas.width = 595; // A4 portrait width in pixels (210mm)
-                canvas.height = 842; // A4 portrait height in pixels (297mm)
-            }
-            
-            const ctx = canvas.getContext('2d');
-            
-            // Calculate source coordinates with overlap
-            let sx, sy, sw, sh;
-            
-            if (centerOverlaps) {
-                // Equal overlap on all sides
-                sx = Math.max(0, col * baseSegmentWidth - overlapXPx);
-                sy = Math.max(0, row * baseSegmentHeight - overlapYPx);
+    function generatePosterPages() {
+        if (!uploadedImage) return;
+        
+        posterPages.innerHTML = '';
+        resultsSection.classList.remove('hidden');
+        const pages = parseInt(pageCount.value);
+        const gridSize = Math.sqrt(pages);
+        const orient = orientation.value;
+        const overlapXPx = (parseInt(overlapX.value) / 25.4) * 96; // Convert mm to pixels (96dpi)
+        const overlapYPx = (parseInt(overlapY.value) / 25.4) * 96; // Convert mm to pixels (96dpi)
+        const showGuides = showGrid.checked;
+        const centerOverlaps = centerOverlap.checked;
+        
+        // Calculate the size of each segment
+        const segmentWidth = uploadedImage.width / gridSize;
+        const segmentHeight = uploadedImage.height / gridSize;
+        
+        // Create a canvas for each page
+        for (let row = 0; row < gridSize; row++) {
+            for (let col = 0; col < gridSize; col++) {
+                const pageNumber = row * gridSize + col + 1;
+                const pageDiv = document.createElement('div');
+                pageDiv.className = 'poster-page relative';
+                
+                const canvas = document.createElement('canvas');
                 
-                // Calculate width with overlap
-                if (col === 0) {
-                    sw = baseSegmentWidth + overlapXPx;
-                } else if (col === gridSize-1) {
-                    sw = uploadedImage.width - sx;
+                // Set canvas dimensions based on orientation
+                if (orient === 'landscape') {
+                    canvas.width = 842; // A4 height as width (landscape)
+                    canvas.height = 595; // A4 width as height (landscape)
                 } else {
-                    sw = baseSegmentWidth + 2 * overlapXPx;
+                    canvas.width = 595; // A4 width in pixels at 72dpi
+                    canvas.height = 842; // A4 height in pixels at 72dpi
                 }
                 
-                // Calculate height with overlap
-                if (row === 0) {
-                    sh = baseSegmentHeight + overlapYPx;
-                } else if (row === gridSize-1) {
-                    sh = uploadedImage.height - sy;
+                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 {
-                    sh = baseSegmentHeight + 2 * overlapYPx;
+                    // Standard orientation
+                    if (centerOverlaps) {
+                        // 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 {
+                        // 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);
+                    }
                 }
-            } else {
-                // Traditional overlaps - overlap only right and bottom
-                sx = col * baseSegmentWidth;
-                sy = row * baseSegmentHeight;
+                // Adjust source rectangle to stay within image bounds
+                let dx = 0, dy = 0;
                 
-                // Calculate width with overlap
-                if (col === gridSize-1) {
-                    sw = uploadedImage.width - sx;
-                } else {
-                    sw = baseSegmentWidth + overlapXPx;
+                if (sx < 0) {
+                    dx = -sx;
+                    sw += sx;
+                    sx = 0;
+                }
+                if (sy < 0) {
+                    dy = -sy;
+                    sh += sy;
+                    sy = 0;
                 }
                 
-                // Calculate height with overlap
-                if (row === gridSize-1) {
-                    sh = uploadedImage.height - sy;
+                // 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') {
+                    // For diagonal orientation, rotate the canvas
+                    ctx.translate(canvas.width/2, canvas.height/2);
+                    ctx.rotate(Math.PI/4);
+                    ctx.drawImage(
+                        uploadedImage,
+                        sx, sy, sw, sh,
+                        -canvas.width/2, -canvas.height/2, canvas.width, canvas.height
+                    );
+                    ctx.setTransform(1, 0, 0, 1, 0, 0);
                 } else {
-                    sh = baseSegmentHeight + overlapYPx;
+                    // 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,
+                        destX, destY, 
+                        destWidth * (sw / (sw + dx)), 
+                        destHeight * (sh / (sh + dy))
+                    );
                 }
-            }
-            // Ensure we don't go out of 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);
-            
-            // Clear canvas
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
-            
-            // Draw the image segment
-            ctx.save();
-            
-            if (orient === 'diagonal') {
-                // For diagonal orientation, rotate the canvas
-                ctx.translate(canvas.width/2, canvas.height/2);
-                ctx.rotate(Math.PI/4);
+                // Draw border around the image segment
+                ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)';
+                ctx.lineWidth = 2;
                 
-                // Calculate dimensions to maintain aspect ratio
-                const scale = Math.min(
-                    canvas.width / Math.max(sw, 1),
-                    canvas.height / Math.max(sh, 1)
-                );
+                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]);
                 
-                const scaledWidth = sw * scale;
-                const scaledHeight = sh * scale;
+                // Left overlap
+                if (col > 0) {
+                    ctx.beginPath();
+                    ctx.moveTo(0, 0);
+                    ctx.lineTo(0, canvas.height);
+                    ctx.stroke();
+                }
                 
-                ctx.drawImage(
-                    uploadedImage,
-                    sx, sy, sw, sh,
-                    -scaledWidth/2, -scaledHeight/2, 
-                    scaledWidth, scaledHeight
-                );
-                ctx.setTransform(1, 0, 0, 1, 0, 0);
-            } else {
-                // Standard orientation - fit to canvas while maintaining aspect ratio
-                const sourceAspect = sw / sh;
-                const canvasAspect = canvas.width / canvas.height;
+                // Right overlap
+                if (col < gridSize - 1) {
+                    ctx.beginPath();
+                    ctx.moveTo(canvas.width, 0);
+                    ctx.lineTo(canvas.width, canvas.height);
+                    ctx.stroke();
+                }
                 
-                let drawWidth, drawHeight, offsetX = 0, offsetY = 0;
+                // Top overlap
+                if (row > 0) {
+                    ctx.beginPath();
+                    ctx.moveTo(0, 0);
+                    ctx.lineTo(canvas.width, 0);
+                    ctx.stroke();
+                }
                 
-                if (sourceAspect > canvasAspect) {
-                    // Source is wider than canvas relative to height
-                    drawHeight = canvas.height;
-                    drawWidth = sw * (canvas.height / sh);
-                    offsetX = (canvas.width - drawWidth) / 2;
-                } else {
-                    // Source is taller than canvas relative to width
-                    drawWidth = canvas.width;
-                    drawHeight = sh * (canvas.width / sw);
-                    offsetY = (canvas.height - drawHeight) / 2;
+                // Bottom overlap
+                if (row < gridSize - 1) {
+                    ctx.beginPath();
+                    ctx.moveTo(0, canvas.height);
+                    ctx.lineTo(canvas.width, canvas.height);
+                    ctx.stroke();
                 }
-                // Draw the image segment with full coverage
-                // First fill background in case of transparent areas
-                ctx.fillStyle = 'white';
-                ctx.fillRect(0, 0, canvas.width, canvas.height);
-ctx.drawImage(
-                    uploadedImage,
-                    sx, sy, sw, sh,
-                    offsetX, offsetY,
-                    drawWidth, drawHeight
-                );
-}
-            // Draw border around the image segment (red for cut lines)
-            ctx.strokeStyle = 'rgba(255, 0, 0, 0.7)';
-            ctx.lineWidth = 2;
-            ctx.strokeRect(offsetX, offsetY, drawWidth, drawHeight);
-// Draw overlap indicators
-            ctx.strokeStyle = 'rgba(0, 0, 255, 0.5)';
-            ctx.lineWidth = 1;
-            ctx.setLineDash([5, 5]);
-            
-            // Left overlap
-            if (col > 0) {
-                ctx.beginPath();
-                ctx.moveTo(0, 0);
-                ctx.lineTo(0, canvas.height);
-                ctx.stroke();
-            }
-            
-            // Right overlap
-            if (col < gridSize - 1) {
-                ctx.beginPath();
-                ctx.moveTo(canvas.width, 0);
-                ctx.lineTo(canvas.width, canvas.height);
-                ctx.stroke();
-            }
-            
-            // Top overlap
-            if (row > 0) {
-                ctx.beginPath();
-                ctx.moveTo(0, 0);
-                ctx.lineTo(canvas.width, 0);
-                ctx.stroke();
-            }
-            
-            // Bottom overlap
-            if (row < gridSize - 1) {
-                ctx.beginPath();
-                ctx.moveTo(0, canvas.height);
-                ctx.lineTo(canvas.width, canvas.height);
-                ctx.stroke();
-            }
-            
-            ctx.restore();
-            
-            // Reset line dash
-            ctx.setLineDash([]);
-            // Draw cutting guides if enabled
-            if (showGuides) {
-                ctx.strokeStyle = 'rgba(255, 0, 0, 0.3)';
-                ctx.lineWidth = 2;
-                ctx.setLineDash([5, 5]);
                 
-                // Vertical guide
-                ctx.beginPath();
-                ctx.moveTo(canvas.width/2, 0);
-                ctx.lineTo(canvas.width/2, canvas.height);
-                ctx.stroke();
+                ctx.restore();
+// Add 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);
+                    }
+                    
+                    // 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);
+                    }
+                }
                 
-                // Horizontal guide
-                ctx.beginPath();
-                ctx.moveTo(0, canvas.height/2);
-                ctx.lineTo(canvas.width, canvas.height/2);
-                ctx.stroke();
+                // Add page number
+                const pageNumberDiv = document.createElement('div');
+                pageNumberDiv.className = 'page-number';
+                pageNumberDiv.textContent = pageNumber;
+                pageDiv.appendChild(pageNumberDiv);
                 
-                ctx.setLineDash([]);
+                // Add canvas to page
+                pageDiv.appendChild(canvas);
+                posterPages.appendChild(pageDiv);
             }
-            // Add page number
-            ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
-            ctx.fillRect(canvas.width - 30, canvas.height - 20, 25, 15);
-            ctx.fillStyle = 'black';
-            ctx.font = '10px Arial';
-            ctx.textAlign = 'right';
-            ctx.fillText(pageNumber, canvas.width - 10, canvas.height - 8);
-            // Add canvas to page
-            pageDiv.appendChild(canvas);
-            posterPages.appendChild(pageDiv);
         }
+        
+        // Scroll to results
+        resultsSection.scrollIntoView({ behavior: 'smooth' });
     }
-    // Scroll to results
-    resultsSection.scrollIntoView({ behavior: 'smooth' });
-}
-function printAllPages() {
+    
+    function printAllPages() {
         window.print();
     }
     

style.css

@@ -3,36 +3,7 @@
     border-color: #3b82f6;
     background-color: #f0f7ff;
 }
-#previewContainer {
-    min-height: 300px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-#previewContainer canvas {
-    max-width: 100%;
-    height: auto;
-    display: block;
-    margin: 0 auto;
-}
 
-@keyframes spin {
-    to { transform: rotate(360deg); }
-}
-
-.animate-spin {
-    animation: spin 1s linear infinite;
-}
-.preview-grid-label {
-    position: absolute;
-    background: rgba(255,255,255,0.7);
-    padding: 2px 5px;
-    border-radius: 3px;
-    font-size: 11px;
-    font-weight: bold;
-    color: #333;
-}
 .poster-page {
     position: relative;
     overflow: hidden;
@@ -49,11 +20,14 @@
     height: 100%;
     object-fit: cover;
 }
+.cutting-guide {
+    position: absolute;
+    background-color: rgba(255, 0, 0, 0.3);
+    z-index: 10;
+}
+
 .poster-page canvas {
-    background: white;
-    border: none;
-    width: 100%;
-    height: 100%;
+    border: 1px dashed rgba(0, 0, 255, 0.5);
 }
 .page-number {
     position: absolute;