在Web Worker中将SVG转换为PNG

Question

我想将SVG转换为Web Worker中的PNG.我的问题是,DOM无法从Worker中访问,因此我无法将SVG绘制到画布或类似的东西.

Answer 1

您可以使用拇指

\n

import Thumbo, { Transfer } from "thumbo";\n\nThumbo.init().then(async () => {\n  Thumbo.thumbnail(\n    Transfer(await (await fetch("/path/to/img.svg")).arrayBuffer()),\n    Thumbo.ImageFormat.Svg,\n    20,\n    20\n  ).then((thumbnailBuffer) => {\n    document.getElementById("img1").src = URL.createObjectURL(\n      new Blob([thumbnailBuffer])\n    );\n  });\n\n  Thumbo.thumbnailFromUrl(\n    "https://example.com/image.svg",\n    Thumbo.ImageFormat.Svg,\n    20,\n    20\n  ).then((thumbnailBuffer) => {\n    document.getElementById("img2").src = URL.createObjectURL(\n      new Blob([thumbnailBuffer])\n    );\n  });\n});\n

\n

在底层，thumbo 使用 Rust 的tiny_skia和resvg库编译为 Web Assembly 模块，在 Web Worker 中渲染 SVG 并将其转换为 PNG。参见拇指核心，拇指

\n

演示 \xe2\x96\xb6\xef\xb8\x8f \n源代码

\n

PS：我是thumbo的作者

\n