diff --git a/print/index.php b/print/index.php index 9036cf32..5b87e5b6 100644 --- a/print/index.php +++ b/print/index.php @@ -20,6 +20,11 @@ include('../globalHTML/header-1.php');
Toggle the paper orientation (Portrait / Landscape)
+
Include cutting aids (black background and centerlines)
+
Set the distance between cards (in pixels)
Set PPI (pixels per inch; only relevant when exporting as a PNG)
diff --git a/print/print.js b/print/print.js index ed2be026..63d509e1 100644 --- a/print/print.js +++ b/print/print.js @@ -9,6 +9,8 @@ var cardMarginY = parseInt(document.querySelector('#cardMargin').value) / ppi; var imageList = []; var canvas = document.querySelector('canvas'); var context = canvas.getContext('2d'); +var aidCanvas = document.createElement('canvas'); +var aidContext = aidCanvas.getContext('2d'); drawSheet(); @@ -23,7 +25,10 @@ function uploadCard(card, filename) { function drawSheet() { canvas.width = page[0] * ppi; canvas.height = page[1] * ppi; - context.clearRect(0, 0, page[0], page[1]); + context.clearRect(0, 0, page[0] * ppi, page[1] * ppi); + aidCanvas.width = canvas.width; + aidCanvas.height = canvas.height; + aidContext.clearRect(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; @@ -33,12 +38,31 @@ function drawSheet() { 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); + if (document.querySelector('#cuttingAids').checked) { + aidContext.fillStyle = 'black'; + aidContext.fillRect(Math.floor((cardX - cardMarginX / 2) * ppi + 2), Math.floor((cardY - cardMarginY / 2) * ppi + 2), Math.ceil((cardWidth + cardMarginX) * ppi - 4), Math.ceil((cardHeight + cardMarginY) * ppi - 4)); + if ((Math.floor(count / cardsX) % cardsY) == 0) { + aidContext.clearRect((cardX - cardMarginX / 2) * ppi, (cardY - cardMarginY / 2) * ppi, (cardWidth + cardMarginX) * ppi, cardMarginY * ppi / 2); + } else if ((Math.floor(count / cardsX) % cardsY) == cardsY - 1) { + aidContext.clearRect((cardX - cardMarginX / 2) * ppi, (cardY + cardHeight) * ppi, (cardWidth + cardMarginX) * ppi, cardMarginY * ppi / 2); + } + if ((count % cardsX) == 0) { + aidContext.clearRect((cardX - cardMarginX / 2) * ppi, (cardY - cardMarginY / 2) * ppi, cardMarginX * ppi / 2, (cardHeight + cardMarginY) * ppi); + } else if ((count % cardsX) == cardsX - 1) { + aidContext.clearRect((cardX + cardWidth) * ppi, (cardY - cardMarginY / 2) * ppi, cardMarginX * ppi / 2, (cardHeight + cardMarginY) * ppi); + } + } } catch { console.log('image failed.'); } } count ++; } + if (document.querySelector('#cuttingAids').checked) { + context.globalCompositeOperation = 'destination-over'; + context.drawImage(aidCanvas, 0, 0, aidCanvas.width, aidCanvas.height); + context.globalCompositeOperation = 'source-over'; + } } async function downloadSheet() { @@ -63,6 +87,9 @@ function downloadPDF() { const cardsX = Math.floor(page[0] / cardWidth); const cardsY = Math.floor(page[1] / cardHeight); var count = 0; + if (document.querySelector('#cuttingAids').checked) { + doc.addImage(aidCanvas, 'PNG', 0, 0, page[0], page[1]); + } 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;