convert multiple images at once

This commit is contained in:
Kyle
2021-02-24 08:15:21 -08:00
parent bb68978454
commit 4464e23222
2 changed files with 13 additions and 16 deletions

View File

@@ -5,26 +5,21 @@ var wizards = new Image();
wizards.crossOrigin = 'anonymous'; wizards.crossOrigin = 'anonymous';
wizards.src = 'wizards.png'; wizards.src = 'wizards.png';
async function imageLocal(event) { function prepareImage(source, filename) {
var reader = new FileReader(); var cardImage = new Image();
reader.onload = function () { cardImage.crossOrigin = 'anonymous';
var cardImage = new Image(); cardImage.onload = function() {
cardImage.crossOrigin = 'anonymous'; cropCard(this, filename);
cardImage.onload = function() {
cropCard(this);
}
cardImage.onerror = errorMessage;
cardImage.src = reader.result;
} }
reader.onerror = errorMessage; cardImage.onerror = errorMessage;
await reader.readAsDataURL(event.target.files[0]); cardImage.src = source;
} }
function errorMessage() { function errorMessage() {
notify('An error occured. Please make sure you\'re uploading a valid image, then try again.', 10); notify('An error occured. Please make sure you\'re uploading a valid image, then try again.', 10);
} }
async function cropCard(image) { async function cropCard(image, filename) {
// Create canvas/context // Create canvas/context
const canvas = document.createElement('canvas'); const canvas = document.createElement('canvas');
// document.body.appendChild(canvas); // document.body.appendChild(canvas);
@@ -43,7 +38,6 @@ async function cropCard(image) {
version = 'none'; version = 'none';
} }
// Draw copyright info // Draw copyright info
console.log(version);
if (version == 'm15Creature') { if (version == 'm15Creature') {
context.drawImage(wizards, 895, 2009, 509, 25); context.drawImage(wizards, 895, 2009, 509, 25);
} else if (version == 'm15Noncreature') { } else if (version == 'm15Noncreature') {
@@ -57,7 +51,7 @@ async function cropCard(image) {
context.drawImage(cardMask, 0, 0, 1500, 2100); context.drawImage(cardMask, 0, 0, 1500, 2100);
// Download the card // Download the card
const download = document.createElement('a'); const download = document.createElement('a');
download.download = document.querySelector('input').files[0].name.split('.')[0] + '.png'; download.download = filename.replace('filename=', '') + '.png';
download.href = canvas.toDataURL(); download.href = canvas.toDataURL();
document.body.appendChild(download); document.body.appendChild(download);
await download.click(); await download.click();

View File

@@ -10,7 +10,10 @@ include('../globalHTML/header-1.php');
<div class="layer margin-bottom-large"> <div class="layer margin-bottom-large">
<div class='padding margin-bottom readable-background'> <div class='padding margin-bottom readable-background'>
<h5 class='margin-bottom padding input-description'>Upload the image that you'd like to convert</h5> <h5 class='margin-bottom padding input-description'>Upload the image that you'd like to convert</h5>
<input type='file' accept='.png, .svg, .jpg, .jpeg, .bmp' placeholder='File Upload' class='input' oninput='imageLocal(event);'> <div class='padding drop-area'>
<h5 class='margin-bottom padding input-description'>Drag and drop</h5>
<input type='file' multiple accept='.png, .svg, .jpg, .jpeg, .bmp' placeholder='File Upload' class='input' oninput='uploadFiles(event.target.files, prepareImage, "filename");' data-dropFunction='prepareImage' data-otherParams='filename'>
</div>
</div> </div>
</div> </div>
<div class="readable-background layer margin-bottom-large"> <div class="readable-background layer margin-bottom-large">