GithubMirrors/cardconjurer
1
0
Fork 1
mirror of https://github.com/Investigamer/cardconjurer.git synced 2025-07-27 13:21:41 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

symbol

Browse Source
This commit is contained in:
Kyle
2019-06-02 16:19:41 -07:00
parent 11cfecf6e0
commit 56f8681321
5 changed files with 414 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
data/main.js
View File

@@ -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)

53
data/site/main.js Normal file
View File

@@ -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()

225
data/symbol/symbol.js Normal file
View File

@@ -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
}