From 98008badfe397a09da5195d78cce3d0e8e28e5ff Mon Sep 17 00:00:00 2001
From: Kyle <41976328+ImKyle4815@users.noreply.github.com>
Date: Fri, 2 Nov 2018 19:56:57 -0700
Subject: [PATCH] Fixed watermarks and added automatic image cropping

---
 data/scripts/autocrop.js  |  5 +++--
 data/scripts/loadImage.js |  1 +
 index.html                | 19 +++++++++++++------
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/data/scripts/autocrop.js b/data/scripts/autocrop.js
index 4efbbc03..ebb9b9ef 100644
--- a/data/scripts/autocrop.js
+++ b/data/scripts/autocrop.js
@@ -8,6 +8,7 @@
         function autocrop(url, destination) {
             //Create image, size canvas, draw image
             var imgTempSetSymbol = new Image()
+            imgTempSetSymbol.crossOrigin = "anonymous"
             imgTempSetSymbol.src = url
             imgTempSetSymbol.onload = function() {
                 if (imgTempSetSymbol.width > 0 && imgTempSetSymbol.height > 0) {
@@ -41,8 +42,8 @@
                 height = pix.y[n] - pix.y[0]
                 var cropped = cropContext.getImageData(pix.x[0], pix.y[0], width + 1, height + 1)
                 //Resizes the canvas and draws cropped image
-                cropCanvas.width = width
-                cropCanvas.height = height
+                cropCanvas.width = width + 1
+                cropCanvas.height = height + 1
                 cropContext.putImageData(cropped, 0, 0)
                 //Saves the newly cropped image to the given image
                 destination.src = cropCanvas.toDataURL()
diff --git a/data/scripts/loadImage.js b/data/scripts/loadImage.js
index 2548d224..b80b6d58 100644
--- a/data/scripts/loadImage.js
+++ b/data/scripts/loadImage.js
@@ -5,6 +5,7 @@ function loadImage(event, destination, arg) {
 		reader.onload = function() {
 			var dataURL = reader.result
 			destination.src = dataURL
+			destination.cropped = false
 		}
 		reader.readAsDataURL(input.files[0])
 	}
diff --git a/index.html b/index.html
index 226a9f9e..25866054 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
 	<script src="data/scripts/loadImage.js"></script>
 	<script src="data/scripts/loadColors.js"></script>
 	<script src="data/scripts/mask.js"></script>
-	<!--<script src="data/scripts/autocrop.js"></script> This is no longer required, but possibly could be in the future -->
+	<script src="data/scripts/autocrop.js"></script> <!-- This script may not be currently used -->
 	<div class="title">Card Conjurer</div>
 </head>
 <!-- <img src="data/background.png"></img> -->
@@ -406,8 +406,14 @@ var imgListUser = ["art", "setSymbol", "watermark", "border"]
 for (i = 0; i < imgListUser.length; i ++) {
 	var imgName = "img" + imgListUser[i].charAt(0).toUpperCase() + imgListUser[i].slice(1)
 	window[imgName] = new Image()
+	window[imgName].crossOrigin = "anonymous"
+	window[imgName].onload = function() {
+		if (this.cropped == false) {
+			this.cropped = true
+			autocrop(this.src, this)
+		}
+	}
 }
-imgArt.crossOrigin = "anonymous"
 //Load static images
 var imgListStatic = ["artistBrush", "foil", "stampGradient", "multiGradient", "rareStamp", "cardMask", "bar", "identity"]
 for (i = 0; i < imgListStatic.length; i ++) {
@@ -768,7 +774,7 @@ function drawSetSymbol() {
 //Draw Watermark
 function drawWatermark() {
 	//The watermark is centered/scaled just like the set symbol
-	if (imgWatermark.src != "" && document.getElementById("checkboxWatermark").checked == true) {
+	if (imgWatermark.width > 0 && document.getElementById("checkboxWatermark").checked == true) {
 		var height = watermarkHeight
 		var width = imgWatermark.width * (height / imgWatermark.height)
 		if (width > watermarkWidth) {
@@ -786,8 +792,8 @@ function drawWatermark() {
 	    } else {
 	    	drawMask(document.getElementById("watermarkColorSelection").value, x, y, width, height, card, imgWatermark, false, false)
 	    }
-	    card.globalAlpha = 1
 	}
+	card.globalAlpha = 1
 }
 //Mana cost
 function drawManaCost() {
@@ -1053,8 +1059,9 @@ function loadSetSymbol() {
 }
 
 //Loads an image from URL
-function imageURL(input, URL) {
-	URL.src = "https://cors-anywhere.herokuapp.com/" + input.value
+function imageURL(input, targetImage) {
+	targetImage.cropped = false
+	targetImage.src = "https://cors-anywhere.herokuapp.com/" + input.value
 }
 
 //Best for last - downloads the image!