mirror of
https://github.com/Investigamer/cardconjurer.git
synced 2025-07-26 21:04:58 -05:00
convert multiple images at once
This commit is contained in:
@@ -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();
|
||||||
|
@@ -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">
|
||||||
|
Reference in New Issue
Block a user