More Moving

data/scripts/autocrop.js

@@ -0,0 +1,51 @@
+//Create canvas for cropping the image
+        var cropCanvas = document.createElement("canvas")
+        var cropContext = cropCanvas.getContext("2d")
+        cropCanvas.onload = function() {
+            //document.body.appendChild(cropCanvas) //For testing purposes only
+        }
+        //Function that auto crops the image
+        function autocrop(url, destination) {
+            //Create image, size canvas, draw image
+            var imgTempSetSymbol = new Image()
+            imgTempSetSymbol.src = url
+            imgTempSetSymbol.onload = function() {
+                if (imgTempSetSymbol.width > 0 && imgTempSetSymbol.height > 0) {
+                cropCanvas.width = imgTempSetSymbol.width
+                cropCanvas.height = imgTempSetSymbol.height
+                cropContext.drawImage(imgTempSetSymbol, 0, 0)
+                //declare variables
+                var width = cropCanvas.width
+                var height = cropCanvas.height
+                var pix = {x:[], y:[]}
+                var imageData = cropContext.getImageData(0,0,cropCanvas.width,cropCanvas.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 + 3
+                        if (imageData.data[index] > 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
+                pix.x.sort(function(a,b){return a-b})
+                pix.y.sort(function(a,b){return a-b})
+                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 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
+                cropContext.putImageData(cropped, 0, 0)
+                //Saves the newly cropped image to the given image
+                destination.src = cropCanvas.toDataURL()
+            }
+        }
+        }

data/scripts/loadColors.js

@@ -0,0 +1,9 @@
+//loadColors("white-White,blue-Blue,colorlessLand-Colorless Land,gold-Gold")
+function loadColors(colors) {
+	var endResult = ""
+	var colorList = colors.split(",")
+	for (i = 0; i < colorList.length; i++) {
+		endResult += "<option value='" + colorList[i].split("-")[0] + "'>" + colorList[i].split("-")[1] + "</option>"
+	}
+	document.getElementById("colorSelection").innerHTML = endResult
+}

data/scripts/loadImage.js

@@ -0,0 +1,11 @@
+function loadImage(event, destination, arg) {
+	if (arg != false) {
+		var input = event.target
+		var reader = new FileReader()
+		reader.onload = function() {
+			var dataURL = reader.result
+			destination.src = dataURL
+		}
+		reader.readAsDataURL(input.files[0])
+	}
+}

data/scripts/loadScript.js

@@ -0,0 +1,8 @@
+function loadScript(scriptName){
+	var script = document.createElement("script")
+	script.setAttribute("type","text/javascript")
+	script.setAttribute("src", scriptName)
+	if (typeof script != "undefined") {
+		document.getElementsByTagName("head")[0].appendChild(script)
+	}
+}

data/scripts/mask.js

@@ -0,0 +1,26 @@
+var mask = document.createElement("canvas")
+var maskContext = mask.getContext("2d")
+
+function drawMask(img, x, y, width, height, imgMask, secondMask, arg) {
+	mask.width = width
+	mask.height = height
+	maskContext.clearRect(0, 0, width, height)
+	maskContext.globalCompositeOperation = "source-over"
+	if (secondMask.src != undefined) {
+		maskContext.drawImage(secondMask, 0, 0, width, height)
+		if (arg == "reverseSecond") {
+			maskContext.globalCompositeOperation = "source-out"
+		} else {
+			maskContext.globalCompositeOperation = "source-in"
+		}
+	}
+	maskContext.drawImage(imgMask, 0, 0, width, height)
+	maskContext.globalCompositeOperation = "source-in"
+	if (img.src == undefined) {
+		maskContext.fillStyle = img
+		maskContext.fillRect(0, 0, width, height)
+	} else {
+		maskContext.drawImage(img, 0, 0, width, height)
+	}
+	card.drawImage(mask, x, y, width, height)
+}