auto white transparency

data/scripts/loadImage.js

@@ -6,6 +6,9 @@ function loadImage(event, destination, arg) {
 			var dataURL = reader.result
 			destination.src = dataURL
 			destination.cropped = false
+			if (destination == imgWatermark) {
+				imgWatermark.whiteToTransparent = false
+			}
 		}
 		reader.readAsDataURL(input.files[0])
 	}

data/scripts/whiteToTransparent.js

@@ -1,56 +1,35 @@
-
 var transparentCanvas = document.createElement("canvas")
 var transparentContext = transparentCanvas.getContext("2d")
-//transparentCanvas.onload = function() {
+document.body.appendChild(transparentCanvas)
-	//document.body.appendChild(transparentCanvas) //For testing purposes only
+
-//}
-transparentCanvas.onload = function() {
-	alert("WHAT")
-}
-//document.body.appendChild(transparentCanvas)
 //Function that auto  the image
-function whiteToTransparent(url, destination) {
+function whiteToTransparent(targetImage) {
     //Create image, size canvas, draw image
-    var imgTempSetSymbol = new Image()
+    var imgTemporary = new Image()
-    imgTempSetSymbol.crossOrigin = "anonymous"
+    imgTemporary.crossOrigin = "anonymous"
-    imgTempSetSymbol.src = url
+    imgTemporary.src = targetImage.src
-    imgTempSetSymbol.onload = function() {
+    imgTemporary.onload = function() {
-    	if (imgTempSetSymbol.width > 0 && imgTempSetSymbol.height > 0) {
+    	if (imgTemporary.width > 0 && imgTemporary.height > 0) {
-    		transparentCanvas.width = imgTempSetSymbol.width
+    		transparentCanvas.width = imgTemporary.width
-    		transparentCanvas.height = imgTempSetSymbol.height
+    		transparentCanvas.height = imgTemporary.height
-    		transparentCanvas.drawImage(imgTempSetSymbol, 0, 0)
+    		transparentContext.drawImage(imgTemporary, 0, 0)
             //declare variables
             var width = transparentCanvas.width
             var height = transparentCanvas.height
-            var pix = {x:[], y:[]}
             var imageData = transparentContext.getImageData(0,0,transparentCanvas.width,transparentCanvas.height)
             var x, y, index
             //Go through every pixel and
             for (y = 0; y < height; y++) {
             	for (x = 0; x < width; x++) {
-                    //(y * width + x) * 4 + 3 calculates the index at which the alpha value of the pixel at x, y is given
+                    index = (y * width + x) * 4
-                    index = (y * width + x) * 4 + 3
+                    if (imageData.data[index] >= 250 && imageData.data[index + 1] >= 250 && imageData.data[index + 2] >= 250) {
-                    if (imageData.data[index] > 0) {
+                        imageData.data[index + 3] = 0
-                        //pix is the image object that stores two arrays of x and y coordinates. These stored coordinates are all the visible pixels
-                        pix.x.push(x)
-                        pix.y.push(y)
                     }
                 }
             }
-            //sorts the arrays numerically
+            transparentContext.clearRect(0, 0, width, height)
-            pix.x.sort(function(a,b){return a-b})
+            transparentContext.putImageData(imageData, 0, 0)
-            pix.y.sort(function(a,b){return a-b})
+            targetImage.src = transparentCanvas.toDataURL()
-            var n = pix.x.length - 1
-            //Finds the difference between the leftmost and rightmost visible pixels, and the topmost and bottommost pixels, cuts out a section of the canvas
-            width = pix.x[n] - pix.x[0]
-            height = pix.y[n] - pix.y[0]
-            var transparentImage = transparentContext.getImageData(pix.x[0], pix.y[0], width + 1, height + 1)
-            //Resizes the canvas and draws  image
-            transparentCanvas.width = width + 1
-            transparentCanvas.height = height + 1
-            transparentContext.putImageData(transparentImage, 0, 0)
-            //Saves the newly  image to the given image
-            destination.src = transparentCanvas.toDataURL()
         }
     }
 }

index.html

@@ -7,7 +7,6 @@
 	<script src="data/scripts/loadColors.js"></script>
 	<script src="data/scripts/mask.js"></script>
 	<script src="data/scripts/autocrop.js"></script>
-	<script src="data/scripts/whiteToTransparent.js"></script>
 	<div class="title">Card Conjurer</div>
 </head>
 <!-- <img src="data/background.png"></img> -->
@@ -241,6 +240,8 @@
 					<br/>
 					<input type="text" class="input" placeholder="Or use a URL" onchange="imageURL(this, imgWatermark)"></input>
 					<br/>
+					<input type="text" class="input" placeholder="Or use a set code" onchange="loadSetSymbolWatermark()" id="inputWatermarkSetCode"></input>
+					<br/>
 					Watermark Color
 					<br/>
 					<select class="input" id="watermarkColorSelection">
@@ -333,7 +334,7 @@
 	--dark-text-color: rgb(96, 96, 96);					/*DARK*/
 	--hover-text-color: rgb(100, 200, 50);				/*HOVER*/
 	--section-background-color: rgba(0, 0, 0, 0.5);		/*BACKGROUND*/
-	--section-border-color: rgba(128, 255, 128, 0.1);	/*BORDER*/
+	--section-border-color: rgba(128, 255, 128, 0.25);	/*BORDER*/
 }
 /*Applies to most elements (with rows and columns)*/
 * {
@@ -518,7 +519,11 @@ for (i = 0; i < imgListUser.length; i ++) {
 	window[imgName] = new Image()
 	window[imgName].crossOrigin = "anonymous"
 	window[imgName].onload = function() {
-		if (this.cropped == false) {
+		//If both tasks are required, it will make white pixels transparent first. That way they also get cropped out.
+		if (this.whiteToTransparent == false) {
+			this.whiteToTransparent = true
+			whiteToTransparent(imgWatermark)
+		} else if (this.cropped == false) {
 			this.cropped = true
 			autocrop(this.src, this)
 		}
@@ -1164,9 +1169,18 @@ function loadSetSymbol() {
 	imgSetSymbol.cropped = false
 	imgSetSymbol.src = "https://cors-anywhere.herokuapp.com/http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=" + document.getElementById("setSymbolCode").value.toUpperCase() + "&size=large&rarity=" + document.getElementById("setSymbolRarity").value.toUpperCase()
 }
+//Set Image to watermark!!!
+function loadSetSymbolWatermark() {
+	imgWatermark.whiteToTransparent = false
+	imgWatermark.cropped = false
+	imgWatermark.src = "https://cors-anywhere.herokuapp.com/http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=" + document.getElementById("inputWatermarkSetCode").value.toUpperCase() + "&size=large&rarity=C"
+}
 //Loads an image from URL
 function imageURL(input, targetImage) {
 	targetImage.cropped = false
+	if (targetImage == imgWatermark) {
+		imgWatermark.whiteToTransparent = false
+	}
 	targetImage.src = "https://cors-anywhere.herokuapp.com/" + input.value
 }
 //Randomizes the sample cards at the bottom of the page. Runs it here too
@@ -1192,5 +1206,7 @@ function downloadCardImage(linkElement) {
 	}
 	linkElement.href = cardImageData
 }
+
 </script>
+<script src="data/scripts/whiteToTransparent.js"></script>
 <html>