برای صفحات یک مقدار همپوشانی قابل تغییر قرار بده و در پایان به صورت pdf بتوان همه عکس ها را پرینت کرد

index.html

@@ -35,7 +35,6 @@
                                 </button>
                             </div>
                         </div>
-
                         <div class="mt-6">
                             <label for="page-count" class="block text-sm font-medium text-gray-700 mb-2">Number of A4 Pages</label>
                             <div class="flex items-center gap-4">
@@ -45,6 +44,13 @@
                         </div>
 
                         <div class="mt-6">
+                            <label for="overlap" class="block text-sm font-medium text-gray-700 mb-2">Overlap between pages (mm)</label>
+                            <div class="flex items-center gap-4">
+                                <input type="range" id="overlap" min="0" max="20" value="5" class="w-full">
+                                <span id="overlap-value" class="font-medium text-gray-800">5mm</span>
+                            </div>
+                        </div>
+<div class="mt-6">
                             <label for="orientation" class="block text-sm font-medium text-gray-700 mb-2">Orientation</label>
                             <div class="flex gap-4">
                                 <button id="portrait" class="orientation-btn active bg-indigo-100 text-indigo-700 px-4 py-2 rounded-lg">
@@ -80,11 +86,17 @@
             <div id="result-section" class="hidden">
                 <div class="flex justify-between items-center mb-4">
                     <h2 class="text-2xl font-bold text-gray-800">Your Poster Pages</h2>
-                    <button id="download-all" class="flex items-center gap-2 bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition">
-                        <i data-feather="download"></i>
-                        Download All
-                    </button>
-                </div>
+                    <div class="flex gap-2">
+                        <button id="download-all" class="flex items-center gap-2 bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition">
+                            <i data-feather="download"></i>
+                            Download All
+                        </button>
+                        <button id="download-pdf" class="flex items-center gap-2 bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition">
+                            <i data-feather="file-text"></i>
+                            PDF for Print
+                        </button>
+                    </div>
+</div>
 
                 <div id="poster-pages" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                     <!-- Generated pages will appear here -->
@@ -108,10 +120,11 @@
     </main>
 
     <custom-footer></custom-footer>
-
     <script src="script.js"></script>
     <script>
-        feather.replace();
+        document.addEventListener('jspdfLoaded', function() {
+            feather.replace();
+        });
     </script>
 <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>

script.js

@@ -1,5 +1,15 @@
+
+// Load jsPDF library
+const script = document.createElement('script');
+script.src = 'https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js';
+script.onload = function() {
+    window.jspdf = window.jspdf.jsPDF;
+    document.dispatchEvent(new Event('jspdfLoaded'));
+};
+document.head.appendChild(script);
+
 document.addEventListener('DOMContentLoaded', function() {
-    // DOM elements
+// DOM elements
     const fileInput = document.getElementById('file-input');
     const uploadBtn = document.getElementById('upload-btn');
     const dropZone = document.getElementById('drop-zone');
@@ -15,33 +25,44 @@ document.addEventListener('DOMContentLoaded', function() {
     const resultSection = document.getElementById('result-section');
     const posterPages = document.getElementById('poster-pages');
     const downloadAllBtn = document.getElementById('download-all');
+    const downloadPdfBtn = document.getElementById('download-pdf');
+    const overlapInput = document.getElementById('overlap');
+    const overlapValue = document.getElementById('overlap-value');
 
     // Current image and settings
-    let currentImage = null;
+let currentImage = null;
     let currentOrientation = 'portrait';
     let currentPageCount = 4;
-
-    // Event listeners
+    let currentOverlap = 5; // in mm
+// Event listeners
     uploadBtn.addEventListener('click', () => fileInput.click());
     fileInput.addEventListener('change', handleFileSelect);
     dropZone.addEventListener('dragover', handleDragOver);
     dropZone.addEventListener('dragleave', handleDragLeave);
     dropZone.addEventListener('drop', handleDrop);
     pageCountInput.addEventListener('input', updatePageCount);
-    portraitBtn.addEventListener('click', () => setOrientation('portrait'));
+    overlapInput.addEventListener('input', updateOverlap);
+portraitBtn.addEventListener('click', () => setOrientation('portrait'));
     landscapeBtn.addEventListener('click', () => setOrientation('landscape'));
     generateBtn.addEventListener('click', generatePosterPages);
     downloadAllBtn.addEventListener('click', downloadAllPages);
+    downloadPdfBtn.addEventListener('click', generatePDF);
 
     // Update page count display
-    function updatePageCount() {
+function updatePageCount() {
         currentPageCount = parseInt(pageCountInput.value);
         pageCountValue.textContent = currentPageCount;
     }
 
     // Set orientation
+    // Update overlap value
+    function updateOverlap() {
+        currentOverlap = parseInt(overlapInput.value);
+        overlapValue.textContent = `${currentOverlap}mm`;
+    }
+
     function setOrientation(orientation) {
-        currentOrientation = orientation;
+currentOrientation = orientation;
         if (orientation === 'portrait') {
             portraitBtn.classList.add('active', 'bg-indigo-100', 'text-indigo-700');
             portraitBtn.classList.remove('border', 'border-gray-300');
@@ -161,12 +182,11 @@ document.addEventListener('DOMContentLoaded', function() {
         
         // Draw the image on canvas
         ctx.drawImage(currentImage, 0, 0, canvas.width, canvas.height);
-        
-        // Calculate each page's dimensions
-        const pageWidth = canvas.width / cols;
-        const pageHeight = canvas.height / rows;
-        
-        // Create individual pages
+        // Calculate each page's dimensions with overlap
+        const overlapPx = currentOverlap * canvas.width / (cols * 210); // Convert mm to pixels based on scale
+        const pageWidth = canvas.width / cols + overlapPx * 2;
+        const pageHeight = canvas.height / rows + overlapPx * 2;
+// Create individual pages
         for (let row = 0; row < rows; row++) {
             for (let col = 0; col < cols; col++) {
                 const pageIndex = row * cols + col;
@@ -179,12 +199,11 @@ document.addEventListener('DOMContentLoaded', function() {
                 const pageCtx = pageCanvas.getContext('2d');
                 
                 // Calculate source dimensions
-                const sx = col * pageWidth;
-                const sy = row * pageHeight;
+                const sx = Math.max(0, col * (canvas.width / cols) - overlapPx);
+                const sy = Math.max(0, row * (canvas.height / rows) - overlapPx);
                 const sw = pageWidth;
                 const sh = pageHeight;
-                
-                // Draw the portion of the image on the page
+// Draw the portion of the image on the page
                 pageCtx.drawImage(
                     canvas,
                     sx, sy, sw, sh,
@@ -271,4 +290,31 @@ document.addEventListener('DOMContentLoaded', function() {
             document.body.removeChild(link);
         });
     }
+
+    // Generate PDF with all pages
+    function generatePDF() {
+        const { jsPDF } = window.jspdf;
+        const pdf = new jsPDF({
+            orientation: currentOrientation === 'portrait' ? 'p' : 'l',
+            unit: 'mm',
+            format: 'a4'
+        });
+
+        const pages = posterPages.querySelectorAll('.poster-page img');
+        
+        pages.forEach((img, index) => {
+            if (index > 0) {
+                pdf.addPage('a4', currentOrientation === 'portrait' ? 'p' : 'l');
+            }
+            
+            // Add image to PDF page (A4 dimensions: 210x297mm or 297x210mm)
+            const width = currentOrientation === 'portrait' ? 210 : 297;
+            const height = currentOrientation === 'portrait' ? 297 : 210;
+            
+            pdf.addImage(img.src, 'JPEG', 0, 0, width, height, undefined, 'FAST');
+        });
+
+        pdf.save('poster-pages.pdf');
+    }
+}
 });

style.css

@@ -7,14 +7,17 @@
 .orientation-btn.active {
     border: 2px solid #6366f1;
 }
-
 .poster-page {
     position: relative;
     background-color: white;
     overflow: hidden;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    break-inside: avoid;
 }
 
+#download-pdf {
+    transition: all 0.2s ease;
+}
 .poster-page::before {
     content: "";
     position: absolute;