symbol

2025-07-27 05:14:53 -05:00 · 2019-06-02 16:19:41 -07:00
parent 11cfecf6e0
commit 56f8681321
5 changed files with 414 additions and 61 deletions
--- a/data/main.js
+++ b/data/main.js
@@ -3,31 +3,6 @@
 //============================================//
 //Hi there :D
 //changeme new location
-window.onscroll = function() {scrollFunction()}
-window.onresize = function() {scrollFunction()}
-
-function scrollFunction() {
-	var scrollHeight = document.body.scrollTop
-	if (scrollHeight < 0) {
-		scrollHeight = 0
-	}
-	var titleHeight = parseInt(window.innerWidth * 141 / 1236 - 10);
-	if (window.innerWidth >= 750) {
-		if (window.innerWidth >= 970) {
-			titleHeight = 100
-		}
-		if (scrollHeight < titleHeight - 30) {
-    		document.getElementById("header").style.maxHeight =  titleHeight - scrollHeight
-  		} else {
-    		document.getElementById("header").style.maxHeight = "30px"
-  		}
-  		document.getElementsByClassName("mainGrid")[0].style.marginTop = titleHeight + 10
-	} else {
-		document.getElementsByClassName("mainGrid")[0].style.marginTop = 0
-		document.getElementById("header").style.maxHeight = titleHeight
-	}
-}
-
 function textAreaKeyPressed() {
 	if (event.key == "Enter" || event.key == "Return" || event.keyCode == 13) {
 		setTimeout(function() {
@@ -808,26 +783,7 @@ function drawCard() {
 	}
 }

-//============================================//
-//                HTML Stuff                  //
-//============================================//
-//Toggles the visibility of predetermined sections of the input boxes
-function toggleView(targetId, targetClass) {
-	for (var i = 0; i < document.getElementsByClassName(targetClass).length; i++) {
-		document.getElementsByClassName(targetClass)[i].classList.remove("shown")
-	}
-	document.getElementById(targetClass + "-" + targetId).classList.add("shown")
-}

-//Downloads the image!
-function downloadCardImage(linkElement) {
-	linkElement.download = document.getElementById("inputName").value.toLowerCase() + ".png"
-	var cardImageData = cardCanvas.toDataURL()
-	if (cardImageData == undefined) {
-		alert("Sorry, it seems that you cannot download your card. Please try using a different browser/device.")
-	}
-	linkElement.href = cardImageData
-}

 //Gives all the select boxes the same color options to choose from
 //loadColors("white-White,blue-Blue,colorlessLand-Colorless Land,gold-Gold"), this is an example of how to use the function
@@ -875,20 +831,7 @@ function randomizeSampleCards(count) {
 	}
 }

-//Loads images from a file upload
-function loadImage(event, destination) {
-	var input = event.target
-	var reader = new FileReader()
-	reader.onload = function() {
-		var dataURL = reader.result
-		destination.src = dataURL
-		destination.cropped = false
-		if (destination == imgWatermark) {
-			imgWatermark.whiteToTransparent = false
-		}
-	}
-	reader.readAsDataURL(input.files[0])
-}
+

 //============================================//
 //                Misc Stuff                  //
@@ -932,6 +875,18 @@ function inputCardArtNameNumber(cardArtNameNumberInput) {
 	sectionTextFunction()
 }

+//Downloads the image!
+function downloadCardImage(linkElement) {
+	if (document.getElementById("inputName").value != "") {
+		linkElement.download = document.getElementById("inputName").value.toLowerCase() + ".png"
+	}
+	var cardImageData = cardCanvas.toDataURL()
+	if (cardImageData == undefined) {
+		alert("Sorry, it seems that you cannot download your card. Please try using a different browser/device.")
+	}
+	linkElement.href = cardImageData
+}
+
 //============================================//
 //           Special Image Loading            //
 //============================================//
@@ -1073,7 +1028,6 @@ function cheight(originalValue = 1050, originalCardHeight = 1050) {
 setTimeout(function(){checkCookies()}, 1005)
 backToDefault("m15")
 loadScript("data/other/setCodeList.js")
-scrollFunction()
 //changeme
 setTimeout(function(){sectionTextFunction()}, 250)
 setTimeout(function(){sectionTextFunction()}, 500)
--- a/data/site/main.js
+++ b/data/site/main.js
@@ -0,0 +1,53 @@
+//============================================//
+//       Card Conjurer, by Kyle Burton        //
+//============================================//
+window.onscroll = function() {scrollFunction()}
+window.onresize = function() {scrollFunction()}
+
+function scrollFunction() {
+	var scrollHeight = document.body.scrollTop
+	if (scrollHeight < 0) {
+		scrollHeight = 0
+	}
+	var titleHeight = parseInt(window.innerWidth * 141 / 1236 - 10);
+	if (window.innerWidth >= 750) {
+		if (window.innerWidth >= 970) {
+			titleHeight = 100
+		}
+		if (scrollHeight < titleHeight - 30) {
+    		document.getElementById("header").style.maxHeight =  titleHeight - scrollHeight
+  		} else {
+    		document.getElementById("header").style.maxHeight = "30px"
+  		}
+  		document.getElementsByClassName("mainGrid")[0].style.marginTop = titleHeight + 10
+	} else {
+		document.getElementsByClassName("mainGrid")[0].style.marginTop = 0
+		document.getElementById("header").style.maxHeight = titleHeight
+	}
+}
+
+//Toggles the visibility of predetermined sections of the input boxes
+function toggleView(targetId, targetClass) {
+	for (var i = 0; i < document.getElementsByClassName(targetClass).length; i++) {
+		document.getElementsByClassName(targetClass)[i].classList.remove("shown")
+	}
+	document.getElementById(targetClass + "-" + targetId).classList.add("shown")
+}
+
+//Loads images from a file upload
+function loadImage(event, destination) {
+	var input = event.target
+	var reader = new FileReader()
+	reader.onload = function() {
+		var dataURL = reader.result
+		destination.src = dataURL
+		destination.cropped = false
+		if (destination == imgWatermark) {
+			imgWatermark.whiteToTransparent = false
+		}
+	}
+	reader.readAsDataURL(input.files[0])
+}
+
+//things to run at the end:
+scrollFunction()
--- a/data/symbol/symbol.js
+++ b/data/symbol/symbol.js
@@ -0,0 +1,225 @@
+//============================================//
+//       Card Conjurer, by Kyle Burton        //
+//============================================//
+canvas = document.getElementById("canvas")
+symbol = canvas.getContext("2d")
+maskCanvas = document.createElement("canvas")
+maskContext = maskCanvas.getContext("2d")
+transparentCanvas = document.createElement("canvas")
+transparentContext = transparentCanvas.getContext("2d")
+cropCanvas = document.createElement("canvas")
+cropContext = cropCanvas.getContext("2d")
+gradientCanvas = document.createElement("canvas")
+gradientCanvas.width = 750
+gradientCanvas.height = 750
+gradientContext = gradientCanvas.getContext("2d")
+finalCanvas = document.createElement("canvas")
+finalContext = finalCanvas.getContext("2d")
+
+symbol.fillStyle = "black"
+
+var imgOriginalSymbol = new Image()
+var imgTransparentSymbol = new Image()
+var imgCroppedSymbol = new Image()
+var imgTempFinalSymbol = new Image()
+var imgFinalSymbol = new Image()
+
+imgOriginalSymbol.crossOrigin = "anonymous"
+imgTransparentSymbol.crossOrigin = "anonymous"
+imgCroppedSymbol.crossOrigin = "anonymous"
+imgTempFinalSymbol.crossOrigin = "anonymous"
+imgFinalSymbol.crossOrigin = "anonymous"
+
+imgOriginalSymbol.onload = function() {
+	whiteToTransparent(imgOriginalSymbol, imgTransparentSymbol)
+}
+imgTransparentSymbol.onload = function() {
+	autocrop(imgTransparentSymbol, imgCroppedSymbol)
+}
+imgCroppedSymbol.onload = function() {
+	createSymbol()
+}
+imgTempFinalSymbol.onload = function() {
+	autocrop(this, imgFinalSymbol)
+}
+imgFinalSymbol.onload = function() {
+	finalCanvas.width = imgFinalSymbol.width
+	finalCanvas.height = imgFinalSymbol.height
+	finalContext.clearRect(0, 0, finalCanvas.width, finalCanvas.height)
+	finalContext.drawImage(imgFinalSymbol, 0, 0)
+}
+
+function createSymbol() {
+	if (imgCroppedSymbol.src != "") {
+		symbol.clearRect(0, 0, canvas.width, canvas.height)
+		maskContext.globalCompositeOperation = "source-over"
+		maskCanvas.width = imgCroppedSymbol.width
+		maskCanvas.height = imgCroppedSymbol.height
+		maskContext.clearRect(0, 0, maskCanvas.width, maskCanvas.height)
+		maskContext.drawImage(imgCroppedSymbol, 0, 0)
+		maskContext.globalCompositeOperation = "source-in"
+		maskContext.fillStyle = document.getElementById("inputBorderColor").value
+		maskContext.fillRect(0, 0, maskCanvas.width, maskCanvas.height)
+		var symbolSize = 500
+		if (imgCroppedSymbol.width > imgCroppedSymbol.height) {
+			width = symbolSize
+			height = imgCroppedSymbol.height * symbolSize / imgCroppedSymbol.width
+		} else {
+			width = imgCroppedSymbol.width * symbolSize / imgCroppedSymbol.height
+			height = symbolSize
+		}
+		var borderThickness = parseInt(document.getElementById("inputBorderThickness").value)
+		var left = 375 - borderThickness
+		var right = 375 + borderThickness
+		var top = 375 - borderThickness
+		var bottom = 375 + borderThickness
+		for (var x = left; x <= right; x++) {
+			for (var y = top; y <= bottom; y++) {
+				symbol.drawImage(maskCanvas, x - width / 2, y - height / 2, width, height)
+			}
+		}
+		gradientContext.globalCompositeOperation = "source-over"
+		gradientContext.clearRect(0, 0, gradientCanvas.width, gradientCanvas.height)
+		gradientContext.drawImage(imgCroppedSymbol, 375 - width / 2, 375 - height / 2, width, height)
+		gradientContext.globalCompositeOperation = "source-in"
+		var angle = parseInt(document.getElementById("inputGradientAngle").value) * Math.PI / 180
+		while (angle <= 0) {
+			angle += Math.PI * 2
+		}
+		while (angle > Math.PI * 2) {
+			angle -= Math.PI * 2
+		}
+		var outerColor = document.getElementById("inputOuterColor").value
+		var innerColor = document.getElementById("inputInnerColor").value
+		if (document.getElementById("inputRarity").value != "custom") {
+			outerColor = document.getElementById("inputRarity").value.split(",")[0]
+			innerColor = document.getElementById("inputRarity").value.split(",")[1]
+		}
+		var gradientHorizontal = 0
+		var gradientVertical = 0
+		if (angle > 7 * Math.PI / 4 || angle <= Math.PI / 4) {
+			gradientHorizontal = 250
+			gradientVertical = Math.sin(angle) * 250 / Math.cos(angle)
+		} else if (angle > 5 * Math.PI / 4) {
+			gradientHorizontal = Math.sin(3 * Math.PI / 2 - angle) * -250 / Math.sin(angle - Math.PI)
+			gradientVertical = -250
+		} else if (angle > 3 * Math.PI / 4) {
+			gradientHorizontal = -250
+			gradientVertical = Math.sin(Math.PI - angle) * 250 / Math.cos(Math.PI - angle)
+		} else {
+			gradientHorizontal = Math.cos(angle) * 250 / Math.sin(angle)
+			gradientVertical = 250
+		}
+		var gradient = gradientContext.createLinearGradient(375 - gradientHorizontal, 375 - gradientVertical, 375 + gradientHorizontal, 375 + gradientVertical)
+		gradient.addColorStop(0, outerColor)
+		gradient.addColorStop(0.5, innerColor)
+		gradient.addColorStop(1, outerColor)
+		gradientContext.fillStyle = gradient
+
+		gradientContext.fillRect(125, 125, 500, 500)
+		symbol.drawImage(gradientCanvas, 0, 0)
+
+		imgTempFinalSymbol.src = canvas.toDataURL()
+	}
+}
+
+
+
+//Function that auto... makes the image's white pixels transparent
+function whiteToTransparent(source, destination) {
+    //Create image, size canvas, draw image
+    var imgTempTarget = new Image()
+    imgTempTarget.crossOrigin = "anonymous"
+    imgTempTarget.src = source.src
+    imgTempTarget.onload = function() {
+    	if (imgTempTarget.width > 0 && imgTempTarget.height > 0) {
+    		transparentCanvas.width = imgTempTarget.width
+    		transparentCanvas.height = imgTempTarget.height
+    		transparentContext.drawImage(imgTempTarget, 0, 0)
+            //declare variables
+            var width = transparentCanvas.width
+            var height = transparentCanvas.height
+            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++) {
+                    index = (y * width + x) * 4
+                    if (imageData.data[index] >= 250 && imageData.data[index + 1] >= 250 && imageData.data[index + 2] >= 250) {
+                        imageData.data[index + 3] = 0
+                    }
+                }
+            }
+            transparentContext.clearRect(0, 0, width, height)
+            transparentContext.putImageData(imageData, 0, 0)
+            destination.src = transparentCanvas.toDataURL()
+        }
+    }
+}
+
+
+//Function that autocrops the image
+function autocrop(source, destination) {
+    //Create image, size canvas, draw image
+    var imgTempTarget = new Image()
+    imgTempTarget.crossOrigin = "anonymous"
+    imgTempTarget.src = source.src
+    imgTempTarget.onload = function() {
+        if (imgTempTarget.width > 0 && imgTempTarget.height > 0) {
+            cropCanvas.width = imgTempTarget.width
+            cropCanvas.height = imgTempTarget.height
+            cropContext.drawImage(imgTempTarget, 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
+            if (imageData.data.length > 4) {
+            	//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 + 1
+	            cropCanvas.height = height + 1
+	            cropContext.putImageData(cropped, 0, 0)
+	            //Saves the newly cropped image to the given image
+	            destination.src = cropCanvas.toDataURL()
+            }
+        }
+    }
+}
+
+
+
+//Loads images via URL
+function imageURL(input, targetImage, processes) {
+	targetImage.cropStatus = processes
+	targetImage.src = "https://cors-anywhere.herokuapp.com/" + input
+}
+
+//Downloads the image!
+function downloadCardImage(linkElement) {
+	var symbolImageData = finalCanvas.toDataURL()
+	if (symbolImageData == undefined) {
+		alert("Sorry, it seems that you cannot download your symbol. Please try using a different browser/device.")
+	}
+	linkElement.href = symbolImageData
+}
--- a/index.html
+++ b/index.html
@@ -447,9 +447,9 @@



-<footer class="info"><a href="http://cardconjurer.com/TermsOfUse.txt" target="_blank">Terms&nbspof&nbspUse</a> &#8226 <a href="http://cardconjurer.com/Disclaimer.txt" target="_blank">Disclaimer</a> &#8226 <a href="https://github.com/ImKyle4815/CardConjurer" target="_blank">Github&nbsppage</a> &#8226 <a href="https://mail.google.com/mail/u/0/?view=cm&fs=1&to=CardConjurerMTG@gmail.com&su=Card%20Conjurer&tf=1" target="_blank">Contact</a></footer>
+<footer class="info"><a href="http://cardconjurer.com/TermsOfUse.txt" target="_blank">Terms&nbspof&nbspUse</a> &#8226 <a href="http://cardconjurer.com/Disclaimer.txt" target="_blank">Disclaimer</a> &#8226 <a href="https://github.com/ImKyle4815/CardConjurer" target="_blank">Github&nbsppage</a> &#8226 <a href="https://mail.google.com/mail/u/0/?view=cm&fs=1&to=CardConjurerMTG@gmail.com&su=Card%20Conjurer&tf=1" target="_blank">Contact</a> &#8226 <a href="symbol.html">Set&nbspSymbol&nbspMaker</a></footer>

 <script src="data/main.js"></script>
-
+<script src="data/site/main.js"></script>

 <html>
--- a/symbol.html
+++ b/symbol.html
@@ -0,0 +1,121 @@
+<!DOCTYPE html5>
+<html>
+<head>
+	<title>Card Conjurer</title>
+	<!-- Favicon craziness! -->
+	<link rel="stylesheet" href="data/site/styles.css">
+	<link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="favicons/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon-16x16.png">
+	<link rel="manifest" href="favicons/site.webmanifest">
+	<link rel="mask-icon" href="favicons/safari-pinned-tab.svg" color="#64ca2f">
+	<link rel="shortcut icon" type="image/x-icon" href="favicons/favicon.ico">
+	<meta name="msapplication-TileColor" content="#00a300">
+	<meta name="msapplication-config" content="favicons/browserconfig.xml">
+	<meta name="theme-color" content="#64ca2f">
+	<!-- Other things -->
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<!-- Here's the stuff that does things? -->
+	<script type='application/ld+json'>
+	{
+		"@context": "http://schema.org/",
+		"@type": "WebPage",
+		"creator": "Kyle Burton",
+		"dateCreated": "July 2018",
+		"inLanguage": {
+			"@type": "Language",
+			"name": "English"
+		},
+		"keywords": [
+			"MTG",
+			"Magic",
+			"card",
+			"custom",
+			"creator"
+		],
+		"typicalAgeRange": "All ages",
+		"description": "Card Conjurer: A free online tool that creates custom Magic: The Gathering Cards. Fast, easy, and offers a wide variety of card frames and other customizations. Planar cards, Ixalan maps, Planeswalkers, and more!",
+		"image": "http://cardconjurer.com/data/site/sampleCards/sample8.png",
+		"mainEntityOfPage": "cardconjurer.com",
+		"name": "Card Conjurer"
+	}
+	</script>
+</head>
+<header>
+	<div class="title"><img src="data/site/images/title.png" id="header"></div>
+</header>
+
+
+<body>
+	<div class="grid mainGrid">
+		<!-- from here -->
+		<div class="canvasContainer">
+			<canvas id="canvas" width="750" height="750"></canvas>
+		</div>
+		<div class="cmmArea">
+			<div class="grid selectionGrid">
+				<div onclick="toggleView('image', 'cmm')">Custom Set Symbol</div>
+			</div>
+			<div class="selectionGridTarget padded">
+				<div class="cmm shown" id="cmm-image">
+					Image
+					<input type="file" name="inputCardArt" class="input" accept="image/*" onchange="loadImage(event, imgOriginalSymbol)" id="inputPicture" placeholder="Via File Upload">
+					<input type="text" class="input" placeholder="Or Via URL" onchange="imageURL(this.value, imgOriginalSymbol, 'none')"><br><br>
+					Border Thickness
+					<input id="inputBorderThickness" type="number" class="input" min="0" value="14" step="1" oninput="createSymbol()">
+					Border Color
+					<input type="color" id="inputBorderColor" value="#000000" class="input" onchange="createSymbol()"><br><br>
+					Rarity
+					<span class="dropdown">
+						<select onchange="createSymbol()" class="input" id="inputRarity">
+							<option value="#000000,#000000">Common</option>
+							<option value="#4d6770,#c2dfe8">Uncommon</option>
+							<option value="#82713d,#d8bd7a" selected="selected">Rare</option>
+							<option value="#a52c28,#e38428">Mythic</option>
+							<option value="#622c75,#c39fc7">Timeshifted</option>
+							<option value="custom">Custom</option>
+						</select>
+					</span>
+					Gradient Angle
+					<input id="inputGradientAngle" type="number" class="input" value="30" step="15" oninput="createSymbol()">
+					<br><br>
+					Custom Gradient Colors<br>
+					Outer <input type="color" id="inputOuterColor" value="#113300" class="input" onchange="createSymbol()"><br>
+					Inner <input type="color" id="inputInnerColor" value="#88ff00" class="input" onchange="createSymbol()"><br><br>
+					<a onclick="downloadCardImage(this)" id="downloadCardImage" href="" target="_blank" download="symbol.png">Download</a>
+				</div>
+			</div>
+		</div>
+		<div style="display: none;"></div>
+		<!-- to here -->
+		<div>
+			<div class="padded">
+				<div class="miniTitle">
+					How You Can Help
+				</div>
+				<div class="paragraph">
+					I hope that you found Card Conjurer useful! If you did, you can help me out tremendously by making a small donation or using a referral link:
+				</div>
+				<div class="grid donateGrid selectionGrid">
+					<div onclick="window.open('https://www.paypal.me/kyleburtondonate', '_blank');" style="color:rgb(0,37,134);">PayPal<img src="data/site/icons/paypal.png"></div>
+					<div onclick="window.open('https://pucatrade.com/invite/gift/186748', '_blank');" style="color:rgb(61,33,58);">PucaTrade<img src="data/site/icons/pucatrade.png"></div>
+					<div onclick="window.open('https://twitter.com/ImKyle4815', '_blank');" style="color:rgb(0,174,239);">@ImKyle4815<img src="data/site/icons/twitter.png"></div>
+					<div onclick="window.open('https://www.massdrop.com/?referer=LNWNLL', '_blank');" style="color:rgb(255,255,255);">Massdrop<img src="data/site/icons/massdrop.png"></div>
+				</div>
+			</div>
+		</div>
+	</div>
+</body>
+
+
+
+
+
+<footer class="info"><a href="http://cardconjurer.com/TermsOfUse.txt" target="_blank">Terms&nbspof&nbspUse</a> &#8226 <a href="http://cardconjurer.com/Disclaimer.txt" target="_blank">Disclaimer</a> &#8226 <a href="https://github.com/ImKyle4815/CardConjurer" target="_blank">Github&nbsppage</a> &#8226 <a href="https://mail.google.com/mail/u/0/?view=cm&fs=1&to=CardConjurerMTG@gmail.com&su=Card%20Conjurer&tf=1" target="_blank">Contact</a> &#8226 <a href="index.html">Card&nbspMaker</a></footer>
+
+<script src="data/symbol/symbol.js"></script>
+<script src="data/site/main.js"></script>
+
+
+<html>