mirror of
https://github.com/Investigamer/cardconjurer.git
synced 2025-07-27 05:14:53 -05:00
reorganization
This commit is contained in:
Kyle
1050
data/scripts/main.js
1050
data/scripts/main.js
File diff suppressed because it is too large
Load Diff
@@ -1,50 +0,0 @@
|
||||
//Create canvas for cropping the image
|
||||
var cropCanvas = document.createElement("canvas")
|
||||
var cropContext = cropCanvas.getContext("2d")
|
||||
|
||||
//Function that auto crops the image
|
||||
function autocrop(url, destination) {
|
||||
//Create image, size canvas, draw image
|
||||
var imgTempSetSymbol = new Image()
|
||||
imgTempSetSymbol.crossOrigin = "anonymous"
|
||||
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 + 1
|
||||
cropCanvas.height = height + 1
|
||||
cropContext.putImageData(cropped, 0, 0)
|
||||
//Saves the newly cropped image to the given image
|
||||
destination.src = cropCanvas.toDataURL()
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
//loadColors("white-White,blue-Blue,colorlessLand-Colorless Land,gold-Gold"), this is an example of how to use the function
|
||||
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
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
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
|
||||
destination.cropped = false
|
||||
if (destination == imgWatermark) {
|
||||
imgWatermark.whiteToTransparent = false
|
||||
}
|
||||
}
|
||||
reader.readAsDataURL(input.files[0])
|
||||
}
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
//Allows javascript files to be loaded through javascript code
|
||||
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)
|
||||
}
|
||||
}
|
||||
@@ -1,48 +0,0 @@
|
||||
var mask = document.createElement("canvas")
|
||||
var maskContext = mask.getContext("2d")
|
||||
|
||||
function drawMask(img, x, y, width, height, targetContext, imgMask, secondMask, arg) {
|
||||
if (imgMask.width > 0) {
|
||||
var context = targetContext
|
||||
mask.width = width
|
||||
mask.height = height
|
||||
maskContext.clearRect(0, 0, width, height)
|
||||
maskContext.globalCompositeOperation = "source-over"
|
||||
if (secondMask.src != undefined && secondMask.width > 0) {
|
||||
maskContext.drawImage(secondMask, 0, 0, width, height)
|
||||
if (arg == "reverseSecond") {
|
||||
maskContext.globalCompositeOperation = "source-out"
|
||||
} else {
|
||||
maskContext.globalCompositeOperation = "source-in"
|
||||
}
|
||||
}
|
||||
//console.log(width + ", " + height + " --- " + imgMask.width + ", " + imgMask.height + " --- " + img.width + ", " + img.height)
|
||||
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 if (img.width > 0) {
|
||||
maskContext.drawImage(img, 0, 0, width, height)
|
||||
}
|
||||
targetContext.drawImage(mask, x, y, width, height)
|
||||
}
|
||||
}
|
||||
|
||||
CanvasRenderingContext2D.prototype.mask = function(content, x, y, width, height) {
|
||||
mask.width = width
|
||||
mask.height = height
|
||||
maskContext.clearRect(0, 0, width, height)
|
||||
var contentList = content.split(";")
|
||||
for (i = 0; i < contentList.length; i ++) {
|
||||
var currentContent = contentList[i].split(",")
|
||||
maskContext.globalCompositeOperation = currentContent[1]
|
||||
if (window[currentContent[0]] != undefined) {
|
||||
maskContext.drawImage(window[currentContent[0]], 0, 0, width, height)
|
||||
} else {
|
||||
maskContext.fillStyle = currentContent[0]
|
||||
maskContext.fillRect(0, 0, width, height)
|
||||
}
|
||||
}
|
||||
this.drawImage(mask, x, y, width, height)
|
||||
}
|
||||
@@ -1,35 +0,0 @@
|
||||
//Create a canvas to work on when making white pixels transparent
|
||||
var transparentCanvas = document.createElement("canvas")
|
||||
var transparentContext = transparentCanvas.getContext("2d")
|
||||
|
||||
//Function that auto the image
|
||||
function whiteToTransparent(targetImage) {
|
||||
//Create image, size canvas, draw image
|
||||
var imgTemporary = new Image()
|
||||
imgTemporary.crossOrigin = "anonymous"
|
||||
imgTemporary.src = targetImage.src
|
||||
imgTemporary.onload = function() {
|
||||
if (imgTemporary.width > 0 && imgTemporary.height > 0) {
|
||||
transparentCanvas.width = imgTemporary.width
|
||||
transparentCanvas.height = imgTemporary.height
|
||||
transparentContext.drawImage(imgTemporary, 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)
|
||||
targetImage.src = transparentCanvas.toDataURL()
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user