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

watermarks

Browse Source
This commit is contained in:
Kyle
2019-09-16 09:49:19 -07:00
parent 856fc617ee
commit c24c2c2fb9
3 changed files with 80 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
new/data/site/main.js
View File

@@ -11,7 +11,7 @@ var mainCanvas = document.getElementById("mainCanvas")
mainCanvas.width = cardWidth
mainCanvas.height = cardHeight
var mainContext = mainCanvas.getContext("2d")
var canvasList = ["card", "mask", "image", "text", "paragraph", "line", "transparent", "crop", "bottomInfo", "setSymbol"]
var canvasList = ["card", "mask", "image", "text", "paragraph", "line", "transparent", "crop", "bottomInfo", "setSymbol", "watermark", "temp"]
for (var i = 0; i < canvasList.length; i++) {
window[canvasList[i] + "Canvas"] = document.createElement("canvas")
window[canvasList[i] + "Canvas"].width = cardWidth
@@ -27,14 +27,18 @@ var cardMasterOpacityValue = []
var manaSymbolCodeList = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "w", "u", "b", "r", "g", "2w", "2u", "2b", "2r", "2g", "pw", "pu", "pb", "pr", "pg", "wu", "wb", "ub", "ur", "br", "bg", "rg", "rw", "gw", "gu", "x", "s", "c", "t","untap", "e", "y", "z", "1/2", "inf", "chaos", "plane", "l+", "l-", "l0", "oldtap", "artistbrush", "bar"]
var manaSymbolImageList = []
//Manually create a few important images
var cardArt = new Image(), setSymbol = new Image()
var cardArt = new Image(), setSymbol = new Image(), watermark = new Image()
cardArt.crossOrigin = "anonymous"
setSymbol.crossOrigin = "anonymous"
watermark.crossOrigin = "anonymous"
cardArt.onload = function() {
updateCardCanvas()
}
setSymbol.onload = function() {
updateSetSymbolCanvas()
}
cardArt.onload = function() {
updateCardCanvas()
watermark.onload = function() {
updateWatermarkCanvas()
}
//Load the mana symbol images
loadManaSymbolImages()
@@ -193,6 +197,40 @@ function updateSetSymbolCanvas() {
setSymbolContext.drawImage(setSymbol, setSymbolX, setSymbolY, setSymbolWidth, setSymbolHeight)
updateCardCanvas()
}
function updateWatermarkCanvas() {
if (document.getElementById("inputWatermarkPrimary").value != "none") {
watermarkContext.clearRect(0, 0, cardWidth, cardHeight)
var watermarkX, watermarkY, watermarkWidth, watermarkHeight
if (version.watermarkWidth / version.watermarkHeight < watermark.width / watermark.height) {
//wider
watermarkWidth = version.watermarkWidth
watermarkHeight = version.watermarkWidth / watermark.width * watermark.height
watermarkX = cardWidth / 2 - watermarkWidth / 2
watermarkY = version.watermarkY - watermarkHeight / 2
} else {
//taller
watermarkHeight = version.watermarkHeight
watermarkWidth = version.watermarkHeight / watermark.height * watermark.width
watermarkX = cardWidth / 2 - watermarkWidth / 2
watermarkY = version.watermarkY - watermarkHeight / 2
}
watermarkContext.drawImage(watermark, watermarkX, watermarkY, watermarkWidth, watermarkHeight)
watermarkContext.globalCompositeOperation = "source-atop"
watermarkContext.fillStyle = document.getElementById("inputWatermarkPrimary").value
watermarkContext.fillRect(0, 0, cardWidth, cardHeight)
if (document.getElementById("inputWatermarkSecondary").value != "none") {
tempContext.clearRect(0, 0, cardWidth, cardHeight)
tempContext.drawImage(window[nameArray[nameArray.indexOf("secondary")]].image, 0, 0, cardWidth, cardHeight)
tempContext.globalCompositeOperation = "source-atop"
tempContext.fillStyle = document.getElementById("inputWatermarkSecondary").value
tempContext.fillRect(0, 0, cardWidth, cardHeight)
tempContext.globalCompositeOperation = "source-over"
watermarkContext.drawImage(tempCanvas, 0, 0, cardWidth, cardHeight)
}
watermarkContext.globalCompositeOperation = "source-over"
updateCardCanvas()
}
}
//Does the bottom info function! This can be different depending on the version.
function updateBottomInfoCanvas() {
window[version.bottomInfoFunction]()
@@ -201,9 +239,10 @@ function updateCardCanvas() {
//clear it
cardContext.fillStyle = "black"
cardContext.fillRect(0, 0, cardWidth, cardHeight)
//draw the art, frame, text, mana symbols, set symbol...
//draw the art, frame, text, mana symbols, set symbol, watermark...
cardContext.drawImage(cardArt, version.artX + getValue("inputCardArtX"), version.artY + getValue("inputCardArtY"), cardArt.width * getValue("inputCardArtZoom") / 100, cardArt.height * getValue("inputCardArtZoom") / 100)
cardContext.drawImage(imageCanvas, 0, 0, cardWidth, cardHeight)
cardContext.drawImage(watermarkCanvas, 0, 0, cardWidth, cardHeight)
cardContext.drawImage(textCanvas, 0, 0, cardWidth, cardHeight)
cardContext.drawImage(bottomInfoCanvas, 0, 0, cardWidth, cardHeight)
cardContext.drawManaCost(document.getElementById("inputManaCost").value, version.manaCostX, version.manaCostY, version.manaCostDiameter, version.manaCostDistance, version.manaCostDirection)
@@ -472,6 +511,7 @@ function changeWhichText() {
document.getElementById("inputText").value = version.textList[whichTextIndex][1]
}
//Removes all the white pixels in an image
var whiteThreshold = 240
function whiteToTransparent(targetImage, source = targetImage.src) {
//Create image, size canvas, draw image
var imgTempTarget = new Image()
@@ -491,7 +531,7 @@ function whiteToTransparent(targetImage, source = targetImage.src) {
for (y = 0; y < height; y++) {
for (x = 0; x < width; x++) {
index = (y * width + x) * 4
if (imageData.data[index] >= 245 && imageData.data[index + 1] >= 245 && imageData.data[index + 2] >= 245) {
if (imageData.data[index] >= whiteThreshold && imageData.data[index + 1] >= whiteThreshold && imageData.data[index + 2] >= whiteThreshold) {
imageData.data[index + 3] = 0
}
}
@@ -660,7 +700,6 @@ function checkCookies() {
/*To do list:
Opacity control
watermarks

3
new/data/versions/m15Version.js
View File

@@ -20,6 +20,9 @@ version.rareStampX = cwidth(340)
version.rareStampY = cheight(965)
version.rareStampWidth = cwidth(70)
version.rareStampHeight = cheight(38)
version.watermarkWidth = cwidth(520)
version.watermarkHeight = cheight(250)
version.watermarkY = cheight(815)
//Name, text, x, y, width, height, font, size, color, other
version.textList = [
["Title", "", cwidth(62), cheight(87), cwidth(630), 0, "belerenb", 40, "black", "oneLine=true"],

31
new/index.html
View File

@@ -93,6 +93,37 @@
</div>
<div class="bar"></div>
</div>
<div>
<div>
Watermark
</div>
<div class="autoGrid">
<div class="tooltip"><input type="file" class="input file" accept="image/*" onchange="uploadImage(event, watermark)" placeholder="Via File Upload"><span class="tooltiptext">Upload an image for the watermark</span></div>
<div class="tooltip"><input type="text" class="input text" placeholder="Via URL" onchange="whiteToTransparent(watermark, 'https://cors-anywhere.herokuapp.com/' + this.value)"><span class="tooltiptext">Enter a URL for the watermark</span></div>
<div class="tooltip"><input type="text" class="input text" placeholder="Via Set Code" onchange="whiteToTransparent(watermark, 'https://cors-anywhere.herokuapp.com/http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=' + this.value + '&size=large')"><span class="tooltiptext">Use a set code<br>(2-3 letters, as seen on the bottom of cards)</span></div>
<div class="tooltip"><select class="select" id="inputWatermarkPrimary" onchange="updateWatermarkCanvas()">
<option value="none">None</option>
<option value="#afa360" selected="selected">White</option>
<option value="#04527c">Blue</option>
<option value="#494949">Black</option>
<option value="#a3280d">Red</option>
<option value="#0f4f14">Green</option>
<option value="#7f5f00">Gold</option>
<option value="#616b72">Artifact/Colorless</option>
</select><span class="tooltiptext">Select the watermark color</span></div>
<div class="tooltip"><select class="select" id="inputWatermarkSecondary" onchange="updateWatermarkCanvas()">
<option value="none">None</option>
<option value="#afa360">White</option>
<option value="#04527c">Blue</option>
<option value="#494949">Black</option>
<option value="#a3280d">Red</option>
<option value="#0f4f14">Green</option>
<option value="#7f5f00">Gold</option>
<option value="#616b72">Artifact/Colorless</option>
</select><span class="tooltiptext">Select the secondary watermark color</span></div>
</div>
<div class="bar"></div>
</div>
<div>
<div>
<a onclick="downloadCardImage(this)" id="downloadCardImage" href="" target="_blank" download="card.png">Download</a>