forked from GithubMirrors/cardconjurer
225 lines
9.0 KiB
JavaScript
225 lines
9.0 KiB
JavaScript
//============================================//
|
|
// 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] >= 240 && imageData.data[index + 1] >= 240 && imageData.data[index + 2] >= 240) {
|
|
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
|
|
} |