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

fix: png was cut off when bleed > 0

Browse source
This commit is contained in:
s3lph 2024-01-25 23:06:52 +01:00
parent 5672860649
commit c87bd85fde
1 changed files with 13 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
index.html
View file

@ -221,27 +221,33 @@
a.click(); a.click();
}; };
inputButtonDownloadPng.onclick = (ev) => { inputButtonDownloadPng.onclick = (ev) => {
let svgSize = doc.width.baseVal.value;
let svgOffset = doc.viewBox.baseVal.x;
let imgSize = parseInt(prompt("Enter image size (e.g. 2048)", "2048")); let imgSize = parseInt(prompt("Enter image size (e.g. 2048)", "2048"));
let svgRoot = doc.getElementById("svgroot"); let svgRoot = doc.getElementById("svgroot");
if (Number.isNaN(imgSize)) { if (Number.isNaN(imgSize)) {
return; return;
} }
// Resize SVG to output size, then export as XML, and resize back to default size
doc.getElementById("bleed").style.stroke = 'black'; doc.getElementById("bleed").style.stroke = 'black';
doc.width.baseVal.value = imgSize; doc.width.baseVal.value = imgSize;
doc.height.baseVal.value = imgSize; doc.height.baseVal.value = imgSize;
doc.viewBox.baseVal.width = imgSize; doc.viewBox.baseVal.width = imgSize;
doc.viewBox.baseVal.height = imgSize; doc.viewBox.baseVal.height = imgSize;
svgRoot.transform.baseVal[0].matrix.a = imgSize/500; doc.viewBox.baseVal.x = svgOffset * imgSize/svgSize;
svgRoot.transform.baseVal[0].matrix.d = imgSize/500; doc.viewBox.baseVal.y = svgOffset * imgSize/svgSize;
svgRoot.transform.baseVal[0].matrix.a = imgSize/svgSize;
svgRoot.transform.baseVal[0].matrix.d = imgSize/svgSize;
let serialized = new XMLSerializer().serializeToString(doc); let serialized = new XMLSerializer().serializeToString(doc);
doc.getElementById("bleed").style.stroke = '#ff00ff'; doc.getElementById("bleed").style.stroke = '#ff00ff';
svgRoot.transform.baseVal[0].matrix.a = 1; svgRoot.transform.baseVal[0].matrix.a = 1;
svgRoot.transform.baseVal[0].matrix.d = 1; svgRoot.transform.baseVal[0].matrix.d = 1;
doc.viewBox.baseVal.width = 500; doc.viewBox.baseVal.width = svgSize;
doc.viewBox.baseVal.height = 500; doc.viewBox.baseVal.height = svgSize;
doc.width.baseVal.value = 500; doc.viewBox.baseVal.x = svgOffset;
doc.height.baseVal.value = 500; doc.viewBox.baseVal.y = svgOffset;
doc.width.baseVal.value = svgSize;
doc.height.baseVal.value = svgSize;
let canvas = document.createElement('canvas'); let canvas = document.createElement('canvas');
canvas.width = imgSize; canvas.width = imgSize;