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

Fixed watermarks and added automatic image cropping

Browse Source
This commit is contained in:
Kyle
2018-11-02 19:56:57 -07:00
parent f16b75ed64
commit 98008badfe
3 changed files with 17 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
data/scripts/autocrop.js
View File

@@ -8,6 +8,7 @@
function autocrop(url, destination) { function autocrop(url, destination) {
//Create image, size canvas, draw image //Create image, size canvas, draw image
var imgTempSetSymbol = new Image() var imgTempSetSymbol = new Image()
imgTempSetSymbol.crossOrigin = "anonymous"
imgTempSetSymbol.src = url imgTempSetSymbol.src = url
imgTempSetSymbol.onload = function() { imgTempSetSymbol.onload = function() {
if (imgTempSetSymbol.width > 0 && imgTempSetSymbol.height > 0) { if (imgTempSetSymbol.width > 0 && imgTempSetSymbol.height > 0) {
@@ -41,8 +42,8 @@
height = pix.y[n] - pix.y[0] height = pix.y[n] - pix.y[0]
var cropped = cropContext.getImageData(pix.x[0], pix.y[0], width + 1, height + 1) var cropped = cropContext.getImageData(pix.x[0], pix.y[0], width + 1, height + 1)
//Resizes the canvas and draws cropped image //Resizes the canvas and draws cropped image
cropCanvas.width = width cropCanvas.width = width + 1
cropCanvas.height = height cropCanvas.height = height + 1
cropContext.putImageData(cropped, 0, 0) cropContext.putImageData(cropped, 0, 0)
//Saves the newly cropped image to the given image //Saves the newly cropped image to the given image
destination.src = cropCanvas.toDataURL() destination.src = cropCanvas.toDataURL()

1
data/scripts/loadImage.js
View File

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

19
index.html
View File

@@ -6,7 +6,7 @@
<script src="data/scripts/loadImage.js"></script> <script src="data/scripts/loadImage.js"></script>
<script src="data/scripts/loadColors.js"></script> <script src="data/scripts/loadColors.js"></script>
<script src="data/scripts/mask.js"></script> <script src="data/scripts/mask.js"></script>
<!--<script src="data/scripts/autocrop.js"></script> This is no longer required, but possibly could be in the future --> <script src="data/scripts/autocrop.js"></script> <!-- This script may not be currently used -->
<div class="title">Card Conjurer</div> <div class="title">Card Conjurer</div>
</head> </head>
<!-- <img src="data/background.png"></img> --> <!-- <img src="data/background.png"></img> -->
@@ -406,8 +406,14 @@ var imgListUser = ["art", "setSymbol", "watermark", "border"]
for (i = 0; i < imgListUser.length; i ++) { for (i = 0; i < imgListUser.length; i ++) {
var imgName = "img" + imgListUser[i].charAt(0).toUpperCase() + imgListUser[i].slice(1) var imgName = "img" + imgListUser[i].charAt(0).toUpperCase() + imgListUser[i].slice(1)
window[imgName] = new Image() window[imgName] = new Image()
window[imgName].crossOrigin = "anonymous"
window[imgName].onload = function() {
if (this.cropped == false) {
this.cropped = true
autocrop(this.src, this)
}
}
} }
imgArt.crossOrigin = "anonymous"
//Load static images //Load static images
var imgListStatic = ["artistBrush", "foil", "stampGradient", "multiGradient", "rareStamp", "cardMask", "bar", "identity"] var imgListStatic = ["artistBrush", "foil", "stampGradient", "multiGradient", "rareStamp", "cardMask", "bar", "identity"]
for (i = 0; i < imgListStatic.length; i ++) { for (i = 0; i < imgListStatic.length; i ++) {
@@ -768,7 +774,7 @@ function drawSetSymbol() {
//Draw Watermark //Draw Watermark
function drawWatermark() { function drawWatermark() {
//The watermark is centered/scaled just like the set symbol //The watermark is centered/scaled just like the set symbol
if (imgWatermark.src != "" && document.getElementById("checkboxWatermark").checked == true) { if (imgWatermark.width > 0 && document.getElementById("checkboxWatermark").checked == true) {
var height = watermarkHeight var height = watermarkHeight
var width = imgWatermark.width * (height / imgWatermark.height) var width = imgWatermark.width * (height / imgWatermark.height)
if (width > watermarkWidth) { if (width > watermarkWidth) {
@@ -786,8 +792,8 @@ function drawWatermark() {
} else { } else {
drawMask(document.getElementById("watermarkColorSelection").value, x, y, width, height, card, imgWatermark, false, false) drawMask(document.getElementById("watermarkColorSelection").value, x, y, width, height, card, imgWatermark, false, false)
} }
card.globalAlpha = 1
} }
card.globalAlpha = 1
} }
//Mana cost //Mana cost
function drawManaCost() { function drawManaCost() {
@@ -1053,8 +1059,9 @@ function loadSetSymbol() {
} }
//Loads an image from URL //Loads an image from URL
function imageURL(input, URL) { function imageURL(input, targetImage) {
URL.src = "https://cors-anywhere.herokuapp.com/" + input.value targetImage.cropped = false
targetImage.src = "https://cors-anywhere.herokuapp.com/" + input.value
} }
//Best for last - downloads the image! //Best for last - downloads the image!