upgraded print

print/index.php

@@ -11,15 +11,24 @@ include('../globalHTML/header-1.php');
 			<option value='8.5,11'>Regular (8.5 by 11)</option>
 			<option value='8.2667,11.6934'>A4</option>
 		</select>
+        <h5 class='margin-bottom padding input-description'>Select your card size</h5>
+        <select onchange='setCardSize(this.value.split(","));' class='input margin-bottom'>
+            <option value='2.5,3.5'>2.5 x 3.5 Inches</option>
+            <option value='2.74,3.74'>2.74 x 3.74 Inches</option>
+            <option value='2.75,3.75'>2.75 x 3.75 Inches</option>
+            <option value='2.48031,3.46457'>63 x 88 mm</option>
+        </select>
         <h5 class='margin-bottom padding input-description'>Toggle the paper orientation (Portrait / Landscape)</h5>
         <button onclick='changeOrientation();' class='input margin-bottom'>Toggle orientation</button>
 		<h5 class='margin-bottom padding input-description'>Set the distance between cards (in pixels)</h5>
-		<input type='number' id='cardMargin' class='input margin-bottom' value='60' min='0' max='100' onchange='setCardDistance(this.value);'>
+        <input type='number' id='cardMargin' class='input margin-bottom' value='60' min='0' max='100' onchange='setCardDistance(this.value);'>
+        <h5 class='margin-bottom padding input-description'>Set PPI (pixels per inch; only relevant when exporting as a PNG)</h5>
+        <input type='number' id='cardPPI' class='input margin-bottom' value='600' min='1' max='2400' onchange='setPPI(this.value);'>
 	</div>
     <div class="layer">
         <div class='padding margin-bottom readable-background drop-area'>
             <h5 class='margin-bottom padding input-description'>Drag and drop the images that you'd like to print</h5>
-            <input type='file' multiple accept='.png, .svg, .jpg, .jpeg, .bmp' placeholder='File Upload' class='input' oninput='uploadFiles(event.target.files, uploadCard);' data-dropFunction='uploadCard' data-otherParams=''>
+            <input type='file' multiple accept='.png, .svg, .jpg, .jpeg, .bmp' placeholder='File Upload' class='input' oninput='uploadFiles(event.target.files, uploadCard, "filename");' data-dropFunction='uploadCard' data-otherParams='filename'>
         </div>
     </div>
     <div class="layer margin-bottom-large center">

print/print.js

@@ -1,10 +1,10 @@
 //Configure sizes
 var ppi = 600;
-var page = [8.5 * ppi, 11 * ppi];
+var page = [8.5, 11];
-var cardWidth = 2.5 * ppi;
+var cardWidth = 2.5;
-var cardHeight = 3.5 * ppi;
+var cardHeight = 3.5;
-var cardMarginX = parseInt(document.querySelector('#cardMargin').value);
+var cardMarginX = parseInt(document.querySelector('#cardMargin').value) / ppi;
-var cardMarginY = parseInt(document.querySelector('#cardMargin').value);
+var cardMarginY = parseInt(document.querySelector('#cardMargin').value) / ppi;
 //Prepare variables/canvas/context
 var imageList = [];
 var canvas = document.querySelector('canvas');
@@ -12,23 +12,30 @@ var context = canvas.getContext('2d');
 drawSheet();
 
 
-function uploadCard(card) {
+function uploadCard(card, filename) {
     var img = new Image();
     img.crossOrigin = 'anonymous';
     img.onload = function() {imageList.push(this); drawSheet();}
+    img.filename = filename.replace('filename=', '');
     img.src = card;
 }
 
 function drawSheet() {
-    canvas.width = page[0];
+    canvas.width = page[0] * ppi;
-    canvas.height = page[1];
+    canvas.height = page[1] * ppi;
     context.clearRect(0, 0, page[0], page[1]);
     const cardsX = Math.floor(page[0] / cardWidth);
     const cardsY = Math.floor(page[1] / cardHeight);
     var count = 0;
     for (var i = imageList.length - 1; i >= 0 && count < cardsX * cardsY; i --) {
         if (imageList[i].width > 1) {
-            context.drawImage(imageList[i], (page[0] - cardsX * cardWidth) / 2 + (count % cardsX) * (cardWidth + cardMarginX) - cardMarginX, (page[1] - cardsY * cardHeight) / 2 + (Math.floor(count / cardsX) % cardsY) * (cardHeight + cardMarginY) - cardMarginY, cardWidth, cardHeight);
+            const cardX = (page[0] - cardsX * cardWidth) / 2 + (count % cardsX) * (cardWidth + cardMarginX) - cardMarginX;
+            const cardY = (page[1] - cardsY * cardHeight) / 2 + (Math.floor(count / cardsX) % cardsY) * (cardHeight + cardMarginY) - cardMarginY;
+            try {
+                context.drawImage(imageList[i], cardX * ppi, cardY * ppi, cardWidth * ppi, cardHeight * ppi);
+            } catch {
+                console.log('image failed.');
+            }
         }
         count ++;
     }
@@ -51,21 +58,38 @@ function downloadPDF() {
     var doc = new jsPDF({
         orientation: pageOrientation,
         unit: 'in',
-        format: [page[0] / ppi, page[1] / ppi]
+        format: [page[0], page[1]]
     });
-    doc.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, page[0] / ppi, page[1] / ppi);
+    const cardsX = Math.floor(page[0] / cardWidth);
+    const cardsY = Math.floor(page[1] / cardHeight);
+    var count = 0;
+    for (var i = imageList.length - 1; i >= 0 && count < cardsX * cardsY; i --) {
+        if (imageList[i].width > 1) {
+            const cardX = (page[0] - cardsX * cardWidth) / 2 + (count % cardsX) * (cardWidth + cardMarginX) - cardMarginX;
+            const cardY = (page[1] - cardsY * cardHeight) / 2 + (Math.floor(count / cardsX) % cardsY) * (cardHeight + cardMarginY) - cardMarginY;
+            console.log(`image: ${imageList[i].filename}, bounds: ${cardX}, ${cardY}, ${cardWidth}, ${cardHeight}`)
+            doc.addImage(imageList[i], 'PNG', cardX, cardY, cardWidth, cardHeight);
+        }
+        count ++;
+    }
     doc.save('print.pdf');
 }
 
 function setPageSize(size = [8.5, 11]) {
-    page[0] = parseFloat(size[0]) * ppi;
+    page[0] = parseFloat(size[0]);
-    page[1] = parseFloat(size[1]) * ppi;
+    page[1] = parseFloat(size[1]);
+    drawSheet();
+}
+
+function setCardSize(size = [2.5, 3.5]) {
+    cardWidth = parseFloat(size[0]);
+    cardHeight = parseFloat(size[1]);
     drawSheet();
 }
 
 function setCardDistance(distance) {
-    cardMarginX = parseInt(distance);
+    cardMarginX = parseInt(distance) / ppi;
-    cardMarginY = parseInt(distance);
+    cardMarginY = parseInt(distance) / ppi;
     drawSheet();
 }
 
@@ -73,3 +97,9 @@ function changeOrientation() {
     page = page.reverse();
     drawSheet();
 }
+
+function setPPI(inputPPI) {
+    ppi = parseInt(inputPPI);
+    setPageSize([page[0], page[1]]);
+    setCardSize([cardWidth, cardHeight]);
+}