reorganization
Before Width: | Height: | Size: 7.8 KiB After Width: | Height: | Size: 7.8 KiB |
Before Width: | Height: | Size: 9.1 KiB After Width: | Height: | Size: 9.1 KiB |
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 9.9 KiB After Width: | Height: | Size: 9.9 KiB |
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 9.9 KiB After Width: | Height: | Size: 9.9 KiB |
Before Width: | Height: | Size: 8.5 KiB After Width: | Height: | Size: 8.5 KiB |
Before Width: | Height: | Size: 8.1 KiB After Width: | Height: | Size: 8.1 KiB |
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 9.0 KiB After Width: | Height: | Size: 9.0 KiB |
Before Width: | Height: | Size: 9.8 KiB After Width: | Height: | Size: 9.8 KiB |
Before Width: | Height: | Size: 7.2 KiB After Width: | Height: | Size: 7.2 KiB |
@@ -263,7 +263,7 @@ function updateBorder() {
|
|||||||
imgBorderFlipTip.src = firstColorPath + "/flipTip.png"
|
imgBorderFlipTip.src = firstColorPath + "/flipTip.png"
|
||||||
}
|
}
|
||||||
imgBorderFlipCircle.src = firstColorPath + "/flipCircle.png"
|
imgBorderFlipCircle.src = firstColorPath + "/flipCircle.png"
|
||||||
imgBorderFlipIcon.src = "data/borders/icons/" + document.getElementById("inputFlipIcon").value
|
imgBorderFlipIcon.src = "data/icons/" + document.getElementById("inputFlipIcon").value
|
||||||
}
|
}
|
||||||
//This allows all the images to be loaded
|
//This allows all the images to be loaded
|
||||||
imagesToLoad = 0
|
imagesToLoad = 0
|
||||||
@@ -786,7 +786,7 @@ function randomizeSampleCards(count) {
|
|||||||
cardNumbers[cardNumbers.length] = randomNumber
|
cardNumbers[cardNumbers.length] = randomNumber
|
||||||
var imgName = "sampleCard" + cardNumbers.length
|
var imgName = "sampleCard" + cardNumbers.length
|
||||||
window[imgName] = new Image()
|
window[imgName] = new Image()
|
||||||
window[imgName].src = "sampleCards/sample-card-" + randomNumber + ".png"
|
window[imgName].src = "images/sampleCards/sample-card-" + randomNumber + ".png"
|
||||||
}
|
}
|
||||||
sampleCard1.onload = function() {
|
sampleCard1.onload = function() {
|
||||||
document.getElementById("sampleCardA").src = sampleCard1.src
|
document.getElementById("sampleCardA").src = sampleCard1.src
|
@@ -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()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
Before Width: | Height: | Size: 520 KiB After Width: | Height: | Size: 520 KiB |
Before Width: | Height: | Size: 526 KiB After Width: | Height: | Size: 526 KiB |
Before Width: | Height: | Size: 514 KiB After Width: | Height: | Size: 514 KiB |
Before Width: | Height: | Size: 453 KiB After Width: | Height: | Size: 453 KiB |
Before Width: | Height: | Size: 543 KiB After Width: | Height: | Size: 543 KiB |
Before Width: | Height: | Size: 522 KiB After Width: | Height: | Size: 522 KiB |
Before Width: | Height: | Size: 447 KiB After Width: | Height: | Size: 447 KiB |
Before Width: | Height: | Size: 552 KiB After Width: | Height: | Size: 552 KiB |
Before Width: | Height: | Size: 469 KiB After Width: | Height: | Size: 469 KiB |
Before Width: | Height: | Size: 524 KiB After Width: | Height: | Size: 524 KiB |
Before Width: | Height: | Size: 542 KiB After Width: | Height: | Size: 542 KiB |
Before Width: | Height: | Size: 483 KiB After Width: | Height: | Size: 483 KiB |
Before Width: | Height: | Size: 542 KiB After Width: | Height: | Size: 542 KiB |
@@ -776,7 +776,7 @@ a:hover, a:active {
|
|||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<script src="data/scripts/main.js"></script>
|
<script src="data/main.js"></script>
|
||||||
<html>
|
<html>
|
||||||
<!--
|
<!--
|
||||||
References
|
References
|
||||||
|