From 56f868132197c091b4c08d4a711c4ba3e5f3aaf8 Mon Sep 17 00:00:00 2001 From: Kyle <41976328+ImKyle4815@users.noreply.github.com> Date: Sun, 2 Jun 2019 16:19:41 -0700 Subject: [PATCH] symbol --- data/main.js | 72 +++----------- data/site/main.js | 53 ++++++++++ data/symbol/symbol.js | 225 ++++++++++++++++++++++++++++++++++++++++++ index.html | 4 +- symbol.html | 121 +++++++++++++++++++++++ 5 files changed, 414 insertions(+), 61 deletions(-) create mode 100644 data/site/main.js create mode 100644 data/symbol/symbol.js create mode 100644 symbol.html diff --git a/data/main.js b/data/main.js index 65dc9fef..ccf1e3b3 100644 --- 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) diff --git a/data/site/main.js b/data/site/main.js new file mode 100644 index 00000000..af48a210 --- /dev/null +++ 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() \ No newline at end of file diff --git a/data/symbol/symbol.js b/data/symbol/symbol.js new file mode 100644 index 00000000..c7b52e6c --- /dev/null +++ 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 +} \ No newline at end of file diff --git a/index.html b/index.html index 76090926..eeb00ce2 100644 --- a/index.html +++ b/index.html @@ -447,9 +447,9 @@ - + - + \ No newline at end of file diff --git a/symbol.html b/symbol.html new file mode 100644 index 00000000..17dcc1e3 --- /dev/null +++ b/symbol.html @@ -0,0 +1,121 @@ + + + + Card Conjurer + + + + + + + + + + + + + + + + + +
+
+
+ + + +
+ +
+ +
+
+
+
Custom Set Symbol
+
+
+
+ Image + +

+ Border Thickness + + Border Color +

+ Rarity + + + + Gradient Angle + +

+ Custom Gradient Colors
+ Outer
+ Inner

+ Download +
+
+
+
+ +
+
+
+ How You Can Help +
+
+ 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: +
+
+
PayPal
+
PucaTrade
+
@ImKyle4815
+
Massdrop
+
+
+
+
+ + + + + + + + + + + + + \ No newline at end of file