fix: png was cut off when bleed > 0
This commit is contained in:
parent
5672860649
commit
c87bd85fde
1 changed files with 13 additions and 7 deletions
20
index.html
20
index.html
|
@ -221,27 +221,33 @@
|
|||
a.click();
|
||||
};
|
||||
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 svgRoot = doc.getElementById("svgroot");
|
||||
if (Number.isNaN(imgSize)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Resize SVG to output size, then export as XML, and resize back to default size
|
||||
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;
|
||||
doc.viewBox.baseVal.x = svgOffset * imgSize/svgSize;
|
||||
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);
|
||||
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;
|
||||
doc.viewBox.baseVal.width = svgSize;
|
||||
doc.viewBox.baseVal.height = svgSize;
|
||||
doc.viewBox.baseVal.x = svgOffset;
|
||||
doc.viewBox.baseVal.y = svgOffset;
|
||||
doc.width.baseVal.value = svgSize;
|
||||
doc.height.baseVal.value = svgSize;
|
||||
|
||||
let canvas = document.createElement('canvas');
|
||||
canvas.width = imgSize;
|
||||
|
|
Loading…
Reference in a new issue