GithubMirrors/cardconjurer
1
0
Fork 1
mirror of https://github.com/Investigamer/cardconjurer.git synced 2025-07-27 05:14:53 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

cutting aids

Browse Source
This commit is contained in:
Kyle
2021-08-17 16:56:35 -07:00
parent ac2c504d17
commit c9d28086a3
2 changed files with 33 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
print/index.php
View File

@@ -20,6 +20,11 @@ include('../globalHTML/header-1.php');
</select> </select>
<h5 class='margin-bottom padding input-description'>Toggle the paper orientation (Portrait / Landscape)</h5> <h5 class='margin-bottom padding input-description'>Toggle the paper orientation (Portrait / Landscape)</h5>
<button onclick='changeOrientation();' class='input margin-bottom'>Toggle orientation</button> <button onclick='changeOrientation();' class='input margin-bottom'>Toggle orientation</button>
<h5 class='margin-bottom padding input-description'>Include cutting aids (black background and centerlines)</h5>
<label class='checkbox-container input'>Cutting aids
<input id='cuttingAids' type='checkbox' onchange='drawSheet();'>
<span class='checkmark'></span>
</label>
<h5 class='margin-bottom padding input-description'>Set the distance between cards (in pixels)</h5> <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> <h5 class='margin-bottom padding input-description'>Set PPI (pixels per inch; only relevant when exporting as a PNG)</h5>

29
print/print.js
View File

@@ -9,6 +9,8 @@ var cardMarginY = parseInt(document.querySelector('#cardMargin').value) / ppi;
var imageList = []; var imageList = [];
var canvas = document.querySelector('canvas'); var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d'); var context = canvas.getContext('2d');
var aidCanvas = document.createElement('canvas');
var aidContext = aidCanvas.getContext('2d');
drawSheet(); drawSheet();
@@ -23,7 +25,10 @@ function uploadCard(card, filename) {
function drawSheet() { function drawSheet() {
canvas.width = page[0] * ppi; canvas.width = page[0] * ppi;
canvas.height = page[1] * 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 cardsX = Math.floor(page[0] / cardWidth);
const cardsY = Math.floor(page[1] / cardHeight); const cardsY = Math.floor(page[1] / cardHeight);
var count = 0; var count = 0;
@@ -33,12 +38,31 @@ function drawSheet() {
const cardY = (page[1] - cardsY * cardHeight) / 2 + (Math.floor(count / cardsX) % cardsY) * (cardHeight + cardMarginY) - cardMarginY; const cardY = (page[1] - cardsY * cardHeight) / 2 + (Math.floor(count / cardsX) % cardsY) * (cardHeight + cardMarginY) - cardMarginY;
try { try {
context.drawImage(imageList[i], cardX * ppi, cardY * ppi, cardWidth * ppi, cardHeight * ppi); 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 { } catch {
console.log('image failed.'); console.log('image failed.');
} }
} }
count ++; 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() { async function downloadSheet() {
@@ -63,6 +87,9 @@ function downloadPDF() {
const cardsX = Math.floor(page[0] / cardWidth); const cardsX = Math.floor(page[0] / cardWidth);
const cardsY = Math.floor(page[1] / cardHeight); const cardsY = Math.floor(page[1] / cardHeight);
var count = 0; 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 --) { for (var i = imageList.length - 1; i >= 0 && count < cardsX * cardsY; i --) {
if (imageList[i].width > 1) { if (imageList[i].width > 1) {
const cardX = (page[0] - cardsX * cardWidth) / 2 + (count % cardsX) * (cardWidth + cardMarginX) - cardMarginX; const cardX = (page[0] - cardsX * cardWidth) / 2 + (count % cardsX) * (cardWidth + cardMarginX) - cardMarginX;