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

better prints

Browse Source
This commit is contained in:
Kyle
2021-02-26 18:08:17 -08:00
parent da0059b49b
commit 30b7730ebd
3 changed files with 20 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
js/main-1.js
View File

@@ -65,7 +65,7 @@ function dropDrop(e) {
otherParams = e.target.closest('.drop-area').children[1].getAttribute('data-otherParams'); otherParams = e.target.closest('.drop-area').children[1].getAttribute('data-otherParams');
uploadFiles(e.dataTransfer.files, destination, otherParams); uploadFiles(e.dataTransfer.files, destination, otherParams);
} }
async function uploadFiles(filesRaw, destination, otherParams) { async function uploadFiles(filesRaw, destination, otherParams = '') {
var files = ([...filesRaw]); var files = ([...filesRaw]);
if (files.length > 9) { if (files.length > 9) {
if (!confirm('You are uploading ' + files.length + ' images. Would you like to continue?')) { if (!confirm('You are uploading ' + files.length + ' images. Would you like to continue?')) {

2
print/index.php
View File

@@ -14,7 +14,7 @@ include('../globalHTML/header-1.php');
<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'>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' class='input margin-bottom' value='50' 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);'>
</div> </div>
<div class="layer"> <div class="layer">
<div class='padding margin-bottom readable-background drop-area'> <div class='padding margin-bottom readable-background drop-area'>

41
print/print.js
View File

@@ -1,12 +1,10 @@
//Configure sizes //Configure sizes
var ppi = 600; var ppi = 600;
var pageWidth = 11 * ppi; var page = [8.5 * ppi, 11 * ppi];
var pageHeight = 8.5 * ppi;
var cardWidth = 2.5 * ppi; var cardWidth = 2.5 * ppi;
var cardHeight = 3.5 * ppi; var cardHeight = 3.5 * ppi;
var cardMarginX = 50; var cardMarginX = parseInt(document.querySelector('#cardMargin').value);
var cardMarginY = 50; var cardMarginY = parseInt(document.querySelector('#cardMargin').value);
var pageOrientation = 'landscape';
//Prepare variables/canvas/context //Prepare variables/canvas/context
var imageList = []; var imageList = [];
var canvas = document.querySelector('canvas'); var canvas = document.querySelector('canvas');
@@ -22,15 +20,15 @@ function uploadCard(card) {
} }
function drawSheet() { function drawSheet() {
canvas.width = pageWidth; canvas.width = page[0];
canvas.height = pageHeight; canvas.height = page[1];
context.clearRect(0, 0, pageWidth, pageHeight); context.clearRect(0, 0, page[0], page[1]);
const cardsX = Math.floor(pageWidth / cardWidth); const cardsX = Math.floor(page[0] / cardWidth);
const cardsY = Math.floor(pageHeight / cardHeight); const cardsY = Math.floor(page[1] / cardHeight);
var count = 0; var count = 0;
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) {
context.drawImage(imageList[i], (pageWidth - cardsX * cardWidth) / 2 + (count % cardsX) * (cardWidth + cardMarginX) - cardMarginX, (pageHeight - cardsY * cardHeight) / 2 + (Math.floor(count / cardsX) % cardsY) * (cardHeight + cardMarginY) - cardMarginY, cardWidth, cardHeight); 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);
} }
count ++; count ++;
} }
@@ -46,18 +44,22 @@ async function downloadSheet() {
} }
function downloadPDF() { function downloadPDF() {
var pageOrientation = 'portrait';
if (page[0] > page[1]) {
pageOrientation = 'landscape';
}
var doc = new jsPDF({ var doc = new jsPDF({
orientation: pageOrientation, orientation: pageOrientation,
unit: 'in', unit: 'in',
format: [pageWidth / ppi, pageHeight / ppi] format: [page[0] / ppi, page[1] / ppi]
}); });
doc.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, pageWidth / ppi, pageHeight / ppi); doc.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, page[0] / ppi, page[1] / ppi);
doc.save('print.pdf'); doc.save('print.pdf');
} }
function setPageSize(size = [8.5, 11]) { function setPageSize(size = [8.5, 11]) {
pageHeight = parseFloat(size[0]) * ppi; page[0] = parseFloat(size[0]) * ppi;
pageWidth = parseFloat(size[1]) * ppi; page[1] = parseFloat(size[1]) * ppi;
drawSheet(); drawSheet();
} }
@@ -68,13 +70,6 @@ function setCardDistance(distance) {
} }
function changeOrientation() { function changeOrientation() {
var oldWidth = pageWidth; page = page.reverse();
pageWidth = pageHeight;
pageHeight = oldWidth;
if (pageWidth > pageHeight) {
pageOrientation = 'landscape';
} else {
pageOrientation = 'portrait';
}
drawSheet(); drawSheet();
} }