mpc to regular converter

converter/converter.js

@@ -0,0 +1,65 @@
+var cardMask = new Image();
+cardMask.crossOrigin = 'anonymous';
+cardMask.src = 'card.png';
+var wizards = new Image();
+wizards.crossOrigin = 'anonymous';
+wizards.src = 'wizards.png';
+
+async function imageLocal(event) {
+    var reader = new FileReader();
+    reader.onload = function () {
+        var cardImage = new Image();
+        cardImage.crossOrigin = 'anonymous';
+        cardImage.onload = function() {
+            cropCard(this);
+        }
+        cardImage.onerror = errorMessage;
+        cardImage.src = reader.result;
+    }
+    reader.onerror = errorMessage;
+    await reader.readAsDataURL(event.target.files[0]);
+}
+
+function errorMessage() {
+    notify('An error occured. Please make sure you\'re uploading a valid image, then try again.', 10);
+}
+
+async function cropCard(image) {
+    // Create canvas/context
+    const canvas = document.createElement('canvas');
+    // document.body.appendChild(canvas);
+    canvas.width = 1500;
+    canvas.height = 2100;
+    const context = canvas.getContext('2d');
+    // Draw card image
+    context.drawImage(image, -66, -60, 1632, 2220);
+    // Determine version
+    var version;
+    if (context.getImageData(1342, 2026, 1, 1).data.toString() == '255,255,255,255') {
+        version = 'm15Noncreature';
+    } else if (context.getImageData(1342, 2062, 1, 1).data.toString() == '255,255,255,255') {
+        version = 'm15Creature';
+    } else {
+        version = 'none';
+    }
+    // Draw copyright info
+    console.log(version);
+    if (version == 'm15Creature') {
+        context.drawImage(wizards, 895, 2009, 509, 25);
+    } else if (version == 'm15Noncreature') {
+        context.drawImage(wizards, 895, 1973, 509, 25);
+    } else {
+        context.drawImage(wizards, 895, 2009, 509, 25);
+        notify('Your card type was unrecognized, and as such may have the copyright info incorrectly placed. Please double check your card.', 10);
+    }
+    // Mask off the corners
+    context.globalCompositeOperation = 'destination-atop';
+    context.drawImage(cardMask, 0, 0, 1500, 2100);
+    // Download the card
+    const download = document.createElement('a');
+    download.download = document.querySelector('input').files[0].name.split('.')[0] + '.png';
+    download.href = canvas.toDataURL();
+    document.body.appendChild(download);
+    await download.click();
+    download.remove();
+}

converter/index.php

@@ -0,0 +1,25 @@
+<?php
+$title = 'MPC to Regular Converter';
+$desc = 'Generate random strands of phyrexian text for use with Card Conjurer, the custom Magic: The Gathering card creator';
+include('../globalHTML/header-1.php');
+?>
+    <h2 class='readable-background header-extension title center margin-bottom-large'>MPC to Regular Converter</h2>
+    <style>
+        
+    </style>
+    <div class="layer margin-bottom-large">
+        <div class='padding margin-bottom readable-background'>
+            <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>
+    </div>
+    <div class="readable-background layer margin-bottom-large">
+        <h3 class='padding margin-bottom center'>
+            Convert MPC-ready cards back into regular sized versions
+        </h3>
+        <h4 class='padding'>
+        	Simply upload your card images (one at a time) and the finished versions will be downloaded automatically.
+        </h4>
+    </div>
+    <script defer src="/converter/converter.js"></script>
+<?php include('../globalHTML/footer.php'); ?>