Mindfang/cardconjurer
1
0
Fork 0
forked from GithubMirrors/cardconjurer
Code Pull Requests Actions Packages Activity

better cutting guides

Browse Source
This commit is contained in:
Kyle
2021-11-10 11:11:12 -08:00
parent 5478d82dcf
commit 76a1b0ec15
2 changed files with 21 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
print/index.php
View File

@@ -54,6 +54,14 @@ include('../globalHTML/header-1.php');
<h4 class='padding'>
Upload up to nine images, and they will automatically arrange themselves on an 8.5" by 11" sheet, so you can print them at home at up to 600PPI.
</h4>
</div>
<div style="display:none;">
<svg id='cuttingGuides' width="1500" height="2100" viewBox="0 0 1500 2100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path d="M1470,3L1470,0L1500,0L1500,30L1497,30L1497,3L1470,3Z" style="fill:rgb(0,166,80);"/>
<path d="M30,2097L30,2100L0,2100L0,2070L3,2070L3,2097L30,2097Z" style="fill:rgb(0,174,239);"/>
<path d="M1470,2097L1470,2100L1500,2100L1500,2070L1497,2070L1497,2097L1470,2097Z" style="fill:rgb(236,3,140);"/>
<path d="M30,3L30,0L0,0L0,30L3,30L3,3L30,3Z" style="fill:rgb(255,242,0);"/>
</svg>
</div>
<script defer src='https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.debug.js'></script>
<script defer src="/print/print.js"></script>

15
print/print.js
View File

@@ -12,7 +12,12 @@ var context = canvas.getContext('2d');
var aidCanvas = document.createElement('canvas');
var aidContext = aidCanvas.getContext('2d');
drawSheet();
//svgs
var cuttingGuides = new Image();
cuttingGuides.src = 'cuttingGuides.svg';
var testImg = document.createElement('IMG');
testImg.src = cuttingGuides.src;
document.body.appendChild(testImg);
function uploadCard(card, filename) {
var img = new Image();
@@ -38,6 +43,9 @@ 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) {
context.drawImage(cuttingGuides, 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));
@@ -94,8 +102,11 @@ function downloadPDF() {
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}`)
console.log(`image: ${imageList[i].filename}, bounds: ${cardX}, ${cardY}, ${cardWidth}, ${cardHeight}`);
doc.addImage(imageList[i], 'PNG', cardX, cardY, cardWidth, cardHeight);
if (document.querySelector('#cuttingAids').checked) {
doc.addImage(cuttingGuides, 'PNG', cardX, cardY, cardWidth, cardHeight);
}
}
count ++;
}