s3lph/antifa-sticker-generator
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: add png download button

Browse source
This commit is contained in:
s3lph 2024-01-24 13:47:13 +01:00
parent 79b9261b51
commit 5c517696a4
1 changed files with 57 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
index.html
View file

@ -12,7 +12,10 @@
</style> </style>
</head> </head>
<body> <body>
<h1>Antifa-Sticker-Generator</h1> <h1>Antifa Sticker Generator</h1>
<p>
A purely client-side sticker generator. <a href="https://git.kabelsalat.ch/s3lph/antifa-sticker-generator">Source Code.</a>
</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" width="500" height="500" id="svg"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" width="500" height="500" id="svg">
<style> <style>
text { text {
@ -42,6 +45,7 @@
<path id="upper" stroke="red" fill="none" d="M 40 250 A 210 210 0 0 1 460 250" /> <path id="upper" stroke="red" fill="none" d="M 40 250 A 210 210 0 0 1 460 250" />
<path id="lower" stroke="red" fill="none" d="M 10 250 A 230 230 0 0 0 490 250" /> <path id="lower" stroke="red" fill="none" d="M 10 250 A 230 230 0 0 0 490 250" />
</defs> </defs>
<g id="svgroot" transform="scale(1, 1)">
<circle id="bleed" cx="250" cy="250" r="249" stroke="#ff00ff" fill="none" stroke-width="0" /> <circle id="bleed" cx="250" cy="250" r="249" stroke="#ff00ff" fill="none" stroke-width="0" />
<circle cx="250" cy="250" r="225" stroke="black" fill="white" stroke-width="50" /> <circle cx="250" cy="250" r="225" stroke="black" fill="white" stroke-width="50" />
<g id="icon"> <g id="icon">
@ -50,6 +54,7 @@
</g> </g>
<text><textPath id="uppertext" startOffset="50%" href="#upper">ANTIFASCHISTISCHE</textPath></text> <text><textPath id="uppertext" startOffset="50%" href="#upper">ANTIFASCHISTISCHE</textPath></text>
<text><textPath id="lowertext" startOffset="50%" href="#lower">AKTION</textPath></text> <text><textPath id="lowertext" startOffset="50%" href="#lower">AKTION</textPath></text>
</g>
</svg> </svg>
<form> <form>
<label for="input-text-upper">Upper text</label> <label for="input-text-upper">Upper text</label>
@ -80,11 +85,15 @@
<input type="checkbox" id="input-check-lock-scale" name="lock-scale" /> <input type="checkbox" id="input-check-lock-scale" name="lock-scale" />
<label for="input-check-lock-scale">Same scale for red and black</label> <label for="input-check-lock-scale">Same scale for red and black</label>
</div> </div>
<div>
<input type="button" id="input-button-download" value="Download SVG" /> <input type="button" id="input-button-download" value="Download SVG" />
<input type="button" id="input-button-download-png" value="Download PNG" />
</div>
<label for="input-file-import-svg">Import downloaded SVG</label> <label for="input-file-import-svg">Import downloaded SVG</label>
<input type="file" id="input-file-import-svg" name="import-svg" accept="image/svg+xml" /> <input type="file" id="input-file-import-svg" name="import-svg" accept="image/svg+xml" />
</form> </form>
<a id="download" download="antifa.svg" filename="antifa.svg"></a> <a id="download" download="antifa.svg" filename="antifa.svg"></a>
<a id="download-png" download="antifa.png" filename="antifa.png"></a>
<script> <script>
let doc = document.getElementById('svg'); let doc = document.getElementById('svg');
let inputTextUpper = document.getElementById("input-text-upper"); let inputTextUpper = document.getElementById("input-text-upper");
@ -101,6 +110,7 @@
let inputCheckLockScale = document.getElementById("input-check-lock-scale"); let inputCheckLockScale = document.getElementById("input-check-lock-scale");
let inputRangeBleed = document.getElementById("input-range-bleed"); let inputRangeBleed = document.getElementById("input-range-bleed");
let inputButtonDownload = document.getElementById("input-button-download"); let inputButtonDownload = document.getElementById("input-button-download");
let inputButtonDownloadPng = document.getElementById("input-button-download-png");
let inputFileImportSvg = document.getElementById("input-file-import-svg"); let inputFileImportSvg = document.getElementById("input-file-import-svg");
inputTextUpper.oninput = (ev) => { inputTextUpper.oninput = (ev) => {
doc.getElementById("uppertext").textContent = inputTextUpper.value; doc.getElementById("uppertext").textContent = inputTextUpper.value;
@ -209,7 +219,43 @@
let a = document.getElementById('download'); let a = document.getElementById('download');
a.setAttribute('href', 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(serialized)); a.setAttribute('href', 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(serialized));
a.click(); a.click();
};
inputButtonDownloadPng.onclick = (ev) => {
let imgSize = parseInt(prompt("Enter image size (e.g. 2048)", "2048"));
let svgRoot = doc.getElementById("svgroot");
if (Number.isNaN(imgSize)) {
return;
} }
doc.getElementById("bleed").style.stroke = 'black';
doc.width.baseVal.value = imgSize;
doc.height.baseVal.value = imgSize;
doc.viewBox.baseVal.width = imgSize;
doc.viewBox.baseVal.height = imgSize;
svgRoot.transform.baseVal[0].matrix.a = imgSize/500;
svgRoot.transform.baseVal[0].matrix.d = imgSize/500;
let serialized = new XMLSerializer().serializeToString(doc);
doc.getElementById("bleed").style.stroke = '#ff00ff';
svgRoot.transform.baseVal[0].matrix.a = 1;
svgRoot.transform.baseVal[0].matrix.d = 1;
doc.viewBox.baseVal.width = 500;
doc.viewBox.baseVal.height = 500;
doc.width.baseVal.value = 500;
doc.height.baseVal.value = 500;
let canvas = document.createElement('canvas');
canvas.width = imgSize;
canvas.height = imgSize;
let ctx = canvas.getContext("2d");
let image = new Image();
image.onload = () => {
ctx.drawImage(image, 0, 0);
let a = document.getElementById('download-png');
a.setAttribute('href', canvas.toDataURL());
a.click();
};
image.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(serialized);
};
inputFileImportSvg.onchange = (ev) => { inputFileImportSvg.onchange = (ev) => {
let file = ev.target.files[0]; let file = ev.target.files[0];
let reader = new FileReader(); let reader = new FileReader();