@dweb-browser/svg-wasm
v0.9.0
Published
SVG Wasm toolkit, including `svg_to_png` and `svg_to_webp`,`detect_svg_render`, capable of detecting if an SVG causes a memory overflow.
Downloads
18
Readme
svg-wasm
SVG Wasm toolkit, including svg_to_png
and svg_to_webp
,detect_svg_render
, capable of detecting if an SVG causes a memory overflow.
example
How to use the sample project that can be viewed, you can use this project on any platform without worrying about copyright issues.
detect_svg_render
Check whether the SVG is overflowing。
console.log("detect_svg_render=>", detect_svg_render(svg, 2));
svg_to_webp
const svg = fs.readFileSync("../test.svg");
const webp_data = svg_to_webp(svg);
fs.writeFileSync("./test.webp", webp_data);
svg_to_png
The third parameter is that the fill type contains Fill
and Contain
.
Contain
: Equal proportional enlargement will not cause the image to be distorted.Fill
:With filling, the image may be distorted.
const svg = fs.readFileSync("../test.svg");
const webp_data = svg_to_png(svg, 996.0, 500.0, "Contain", 5242880.0);
fs.writeFileSync("./test.png", webp_data);
import wasm
how to use within vite
fetch wasm file
Vite will automatically pack the wasm file into the dist/assets folder. On the website, it will download this wasm file using network.
import init, { compress, decompress } from "@dweb-browser/svg-wasm";
import svg_wasm_url from "@dweb-browser/svg-wasm/svg_wasm_bg.wasm?url";
// Modern browsers can directly use `await init(svg_wasm_url);`
init(svg_wasm_url).then(() => {
const svg = fs.readFileSync("../test.svg");
const webp_data = svg_to_webp(svg);
fs.writeFileSync("./test.webp", webp_data);
});
bundle wasm into js with base64 encoding
import { compress, decompress, initSync } from "@dweb-browser/zstd-wasm"; import get_zstd_wasm_binary from "@dweb-browser/zstd-wasm/zstd_wasm_bg_wasm"; initSync(get_zstd_wasm_binary());
/// compress or decompress
how to build
- rustup target add wasm32-unknown-unknown
- install wasm-bindgen
cargo install wasm-bindgen-cli
- install wasm-pack
cargo install wasm-pack
- install tsc
npm install -g typescript
- install deno
curl -fsSL https://deno.land/install.sh | sh # macos or linux irm https://deno.land/install.ps1 | iex # windows
- run script:
deno task build
output to pkg folder