Add grayscale toggle

This commit is contained in:
Josh birnholz
2023-10-11 17:40:25 -04:00
parent dec3983925
commit dbe46c2425
3 changed files with 11 additions and 0 deletions

View File

@@ -331,6 +331,13 @@
<button class='input' onclick='autoFitArt();'>Auto Fit Art</button> <button class='input' onclick='autoFitArt();'>Auto Fit Art</button>
</div> </div>
</div> </div>
<div class='readable-background padding margin-bottom'>
<h5 class='input-description margin-bottom'>Make the art grayscale</h5>
<label class='checkbox-container input'>Grayscale
<input id='grayscale-art' type='checkbox' onchange='drawCard();'>
<span class='checkmark'></span>
</label>
</div>
<div class='readable-background padding margin-bottom'> <div class='readable-background padding margin-bottom'>
<h5 class='padding margin-bottom input-description'>Clears the art, making it blank</h5> <h5 class='padding margin-bottom input-description'>Clears the art, making it blank</h5>
<button class='input margin-bottom' onclick='uploadArt(blank.src);'>Remove Art</button> <button class='input margin-bottom' onclick='uploadArt(blank.src);'>Remove Art</button>

View File

@@ -4490,6 +4490,9 @@ function drawCard() {
cardContext.save(); cardContext.save();
cardContext.translate(scaleX(card.artX), scaleY(card.artY)); cardContext.translate(scaleX(card.artX), scaleY(card.artY));
cardContext.rotate(Math.PI / 180 * (card.artRotate || 0)); cardContext.rotate(Math.PI / 180 * (card.artRotate || 0));
if (document.querySelector('#grayscale-art').checked) {
cardContext.filter='grayscale(1)';
}
cardContext.drawImage(art, 0, 0, art.width * card.artZoom, art.height * card.artZoom); cardContext.drawImage(art, 0, 0, art.width * card.artZoom, art.height * card.artZoom);
cardContext.restore(); cardContext.restore();
// frame elements // frame elements

View File

@@ -63,6 +63,7 @@ document.querySelector('#loadFrameVersion').onclick = async function() {
rules: {name:'Rules Text', text:'', x:0.086, y:0.6303, width:0.828, height:0.2875, size:0.0362, color:'white'}, rules: {name:'Rules Text', text:'', x:0.086, y:0.6303, width:0.828, height:0.2875, size:0.0362, color:'white'},
pt: {name:'Power/Toughness', text:'', x:0.7928, y:0.902, width:0.1367, height:0.0372, size:0.0372, font:'belerenbsc', oneLine:true, align:'center', color:'white'} pt: {name:'Power/Toughness', text:'', x:0.7928, y:0.902, width:0.1367, height:0.0372, size:0.0372, font:'belerenbsc', oneLine:true, align:'center', color:'white'}
}); });
notify('You can now make the art grayscale in the art tab!');
} }
//loads available frames //loads available frames
loadFramePack(); loadFramePack();