Mindfang/cardconjurer
1
0
Fork 0
forked from GithubMirrors/cardconjurer
Code Pull Requests Actions Packages Activity

auto white transparency

Browse Source
This commit is contained in:
Kyle
2018-11-03 20:55:34 -07:00
parent 704ad56dec
commit ba21202c16
3 changed files with 39 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
data/scripts/loadImage.js
View File

@@ -6,6 +6,9 @@ function loadImage(event, destination, arg) {
var dataURL = reader.result
destination.src = dataURL
destination.cropped = false
if (destination == imgWatermark) {
imgWatermark.whiteToTransparent = false
}
}
reader.readAsDataURL(input.files[0])
}

55
data/scripts/whiteToTransparent.js
View File

@@ -1,56 +1,35 @@
var transparentCanvas = document.createElement("canvas")
var transparentContext = transparentCanvas.getContext("2d")
//transparentCanvas.onload = function() {
//document.body.appendChild(transparentCanvas) //For testing purposes only
//}
transparentCanvas.onload = function() {
alert("WHAT")
}
//document.body.appendChild(transparentCanvas)
document.body.appendChild(transparentCanvas)
//Function that auto the image
function whiteToTransparent(url, destination) {
function whiteToTransparent(targetImage) {
//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) {
transparentCanvas.width = imgTempSetSymbol.width
transparentCanvas.height = imgTempSetSymbol.height
transparentCanvas.drawImage(imgTempSetSymbol, 0, 0)
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 pix = {x:[], y:[]}
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++) {
//(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)
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
}
}
}
//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 transparentImage = transparentContext.getImageData(pix.x[0], pix.y[0], width + 1, height + 1)
//Resizes the canvas and draws image
transparentCanvas.width = width + 1
transparentCanvas.height = height + 1
transparentContext.putImageData(transparentImage, 0, 0)
//Saves the newly image to the given image
destination.src = transparentCanvas.toDataURL()
transparentContext.clearRect(0, 0, width, height)
transparentContext.putImageData(imageData, 0, 0)
targetImage.src = transparentCanvas.toDataURL()
}
}
}

22
index.html
View File

@@ -7,7 +7,6 @@
<script src="data/scripts/loadColors.js"></script>
<script src="data/scripts/mask.js"></script>
<script src="data/scripts/autocrop.js"></script>
<script src="data/scripts/whiteToTransparent.js"></script>
<div class="title">Card Conjurer</div>
</head>
<!-- <img src="data/background.png"></img> -->
@@ -241,6 +240,8 @@
<br/>
<input type="text" class="input" placeholder="Or use a URL" onchange="imageURL(this, imgWatermark)"></input>
<br/>
<input type="text" class="input" placeholder="Or use a set code" onchange="loadSetSymbolWatermark()" id="inputWatermarkSetCode"></input>
<br/>
Watermark Color
<br/>
<select class="input" id="watermarkColorSelection">
@@ -333,7 +334,7 @@
--dark-text-color: rgb(96, 96, 96); /*DARK*/
--hover-text-color: rgb(100, 200, 50); /*HOVER*/
--section-background-color: rgba(0, 0, 0, 0.5); /*BACKGROUND*/
--section-border-color: rgba(128, 255, 128, 0.1); /*BORDER*/
--section-border-color: rgba(128, 255, 128, 0.25); /*BORDER*/
}
/*Applies to most elements (with rows and columns)*/
* {
@@ -518,7 +519,11 @@ for (i = 0; i < imgListUser.length; i ++) {
window[imgName] = new Image()
window[imgName].crossOrigin = "anonymous"
window[imgName].onload = function() {
if (this.cropped == false) {
//If both tasks are required, it will make white pixels transparent first. That way they also get cropped out.
if (this.whiteToTransparent == false) {
this.whiteToTransparent = true
whiteToTransparent(imgWatermark)
} else if (this.cropped == false) {
this.cropped = true
autocrop(this.src, this)
}
@@ -1164,9 +1169,18 @@ function loadSetSymbol() {
imgSetSymbol.cropped = false
imgSetSymbol.src = "https://cors-anywhere.herokuapp.com/http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=" + document.getElementById("setSymbolCode").value.toUpperCase() + "&size=large&rarity=" + document.getElementById("setSymbolRarity").value.toUpperCase()
}
//Set Image to watermark!!!
function loadSetSymbolWatermark() {
imgWatermark.whiteToTransparent = false
imgWatermark.cropped = false
imgWatermark.src = "https://cors-anywhere.herokuapp.com/http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=" + document.getElementById("inputWatermarkSetCode").value.toUpperCase() + "&size=large&rarity=C"
}
//Loads an image from URL
function imageURL(input, targetImage) {
targetImage.cropped = false
if (targetImage == imgWatermark) {
imgWatermark.whiteToTransparent = false
}
targetImage.src = "https://cors-anywhere.herokuapp.com/" + input.value
}
//Randomizes the sample cards at the bottom of the page. Runs it here too
@@ -1192,5 +1206,7 @@ function downloadCardImage(linkElement) {
}
linkElement.href = cardImageData
}
</script>
<script src="data/scripts/whiteToTransparent.js"></script>
<html>