bombinans
/
poptimal
1
0
Fork 0
Code Issues 9 Pull Requests Packages Projects 1 Releases Wiki Activity

Moved the resvg code into downloads, made both svg and png work the 

same way, added a note crediting resvg
pull/17/head
Mike Lynch 2025-01-11 17:43:01 +11:00
parent 146894583b
commit a02252d8fb
2 changed files with 38 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/download.js
View File

@ -1,4 +1,5 @@
import * as resvg from 'npm:@resvg/resvg-wasm';
const xmlns = "http://www.w3.org/2000/xmlns/";
@ -25,7 +26,7 @@ export function download(value, name = "untitled", label = "Save") {
}
a.onclick = async event => {
console.log("clicked");
console.log("clicked download");
b.disabled = true;
if (a.href) {
console.log(`already saved: ${a.href}`);
@ -33,7 +34,9 @@ export function download(value, name = "untitled", label = "Save") {
}
b.textContent = "Saving…";
try {
console.log("awaiting value function");
const object = await (typeof value === "function" ? value() : value);
console.log(object);
b.textContent = "Download";
a.href = URL.createObjectURL(object); // eslint-disable-line require-atomic-updates
console.log(`url = ${a.href}`);
@ -57,7 +60,26 @@ export function svg_to_string(svg) {
}
export function svg_to_blob(svg) {
export function download_as_svg(svg) {
console.log("HEY download_as_svg");
const str = svg_to_string(svg);
return new Blob([string], {type: "image/svg+xml"})
return new Blob([str], {type: "image/svg+xml"})
}
export async function download_as_png (svg) {
// The Wasm must be initialized first
const svgstr = svg_to_string(svg);
const opts = {
fitTo: {
mode: 'width', // If you need to change the size
value: 400,
}
};
const resvgJS = new resvg.Resvg(svgstr, opts)
const pngData = resvgJS.render(svgstr, opts)
const pngBuffer = pngData.asPng();
return new Blob([pngBuffer], { type: 'image/png' });
}

56
src/index.md
View File

@ -16,7 +16,7 @@ toc: false
import {RADIUS_OPTS, DotMaker} from './components/dots.js';
import {PALETTES, DotControls} from './components/controls.js';
import {download, svg_to_string, svg_to_blob} from './components/download.js';
import {download, download_as_svg, download_as_png} from './components/download.js';
import random from "npm:random";
import * as resvg from 'npm:@resvg/resvg-wasm';
@ -160,52 +160,22 @@ display(svg.node());
```js
display(download(() => svg_to_blob(svg.node()), "poptimal.svg", "Save as SVG"));
display(download(() => {
const thing = download_as_svg(svg.node())
return thing;
}, "poptimal.svg", "Save as SVG"));
```
```js
const png_img = document.createElement("img");
async function svg_to_png (svg) {
// The Wasm must be initialized first
const svgstr = svg_to_string(svg.node());
const opts = {
background: 'rgba(238, 235, 230, .9)',
fitTo: {
mode: 'width', // If you need to change the size
value: 400,
}
};
const resvgJS = new resvg.Resvg(svgstr, opts)
console.log(resvgJS);
const pngData = resvgJS.render(svgstr, opts) // Output PNG data, Uint8Array
console.log(`pngData = ${pngData}`);
const pngBuffer = pngData.asPng();
const pngURL = URL.createObjectURL(new Blob([pngBuffer], { type: 'image/png' }))
console.log(`url = ${pngURL}`);
png_img.src = pngURL
}
display(png_img);
const made_png = view(Inputs.button("Make PNG"));
```
```js
made_png;
console.log(made_png);
if( made_png > 0 ) {
console.log("Trying to make png");
await svg_to_png(svg);
}
display(download(() => {
console.log("PNG value");
const thing = download_as_png(svg.node())
return thing;
}, "poptimal.png", "Save as PNG"));
```
(PNGs made with <a href="https://github.com/thx/resvg-js">resvg-wasm</a> in-browser)
</div>