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'> <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. 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> </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> </div>
<script defer src='https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.debug.js'></script> <script defer src='https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.debug.js'></script>
<script defer src="/print/print.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 aidCanvas = document.createElement('canvas');
var aidContext = aidCanvas.getContext('2d'); var aidContext = aidCanvas.getContext('2d');
drawSheet(); 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) { function uploadCard(card, filename) {
var img = new Image(); 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; 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) {
context.drawImage(cuttingGuides, cardX * ppi, cardY * ppi, cardWidth * ppi, cardHeight * ppi);
}
if (document.querySelector('#cuttingAids').checked) { if (document.querySelector('#cuttingAids').checked) {
aidContext.fillStyle = 'black'; 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)); 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) { 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;
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;
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); doc.addImage(imageList[i], 'PNG', cardX, cardY, cardWidth, cardHeight);
if (document.querySelector('#cuttingAids').checked) {
doc.addImage(cuttingGuides, 'PNG', cardX, cardY, cardWidth, cardHeight);
}
} }
count ++; count ++;
} }