From ad0d0efa8e97cabd1d3a11683f9e48747d6f36ed Mon Sep 17 00:00:00 2001 From: Kyle <41976328+ImKyle4815@users.noreply.github.com> Date: Fri, 14 May 2021 09:27:57 -0700 Subject: [PATCH] upgraded print --- print/index.php | 13 +++++++++-- print/print.js | 60 ++++++++++++++++++++++++++++++++++++------------- 2 files changed, 56 insertions(+), 17 deletions(-) diff --git a/print/index.php b/print/index.php index 46e58a6d..16ae3bd9 100644 --- a/print/index.php +++ b/print/index.php @@ -11,15 +11,24 @@ include('../globalHTML/header-1.php'); +
Select your card size
+
Toggle the paper orientation (Portrait / Landscape)
Set the distance between cards (in pixels)
- + +
Set PPI (pixels per inch; only relevant when exporting as a PNG)
+
Drag and drop the images that you'd like to print
- +
diff --git a/print/print.js b/print/print.js index 2294e7fe..ed2be026 100644 --- a/print/print.js +++ b/print/print.js @@ -1,10 +1,10 @@ //Configure sizes var ppi = 600; -var page = [8.5 * ppi, 11 * ppi]; -var cardWidth = 2.5 * ppi; -var cardHeight = 3.5 * ppi; -var cardMarginX = parseInt(document.querySelector('#cardMargin').value); -var cardMarginY = parseInt(document.querySelector('#cardMargin').value); +var page = [8.5, 11]; +var cardWidth = 2.5; +var cardHeight = 3.5; +var cardMarginX = parseInt(document.querySelector('#cardMargin').value) / ppi; +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.height = page[1]; + canvas.width = page[0] * ppi; + 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,25 +58,48 @@ 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[1] = parseFloat(size[1]) * ppi; + page[0] = parseFloat(size[0]); + 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); - cardMarginY = parseInt(distance); + cardMarginX = parseInt(distance) / ppi; + cardMarginY = parseInt(distance) / ppi; drawSheet(); } function changeOrientation() { page = page.reverse(); drawSheet(); +} + +function setPPI(inputPPI) { + ppi = parseInt(inputPPI); + setPageSize([page[0], page[1]]); + setCardSize([cardWidth, cardHeight]); } \ No newline at end of file