在 Web Worker 中将 SVG 转换为 PNG

Question

我想在 Web Worker 中将 SVG 转换为 PNG。我的问题是，DOM 无法从 Worker 中访问，所以我无法将 SVG 绘制为 canvas 或类似的东西。

Answer 1

Weeell，您总是可以手动解析 SVG 并从中构建位图，但是（！）这显然需要更多工作，因为您必须构建 SVG 解析器和 PNG 编写器，而不是提及线条和双模式多边形填充的栅格化代码，包括。抗锯齿、图案、矩阵、合成、混合和渐变支持。不过可能是一个不错的周末项目:)

但更重要的是：您只能通过使用常规上下文（none-webworker）的内置工具或可选地设置基于服务器的服务来执行此操作。

Answer 2

您可以使用thumbo

import Thumbo, { Transfer } from "thumbo";

Thumbo.init().then(async () => {
  Thumbo.thumbnail(
    Transfer(await (await fetch("/path/to/img.svg")).arrayBuffer()),
    Thumbo.ImageFormat.Svg,
    20,
    20
  ).then((thumbnailBuffer) => {
    document.getElementById("img1").src = URL.createObjectURL(
      new Blob([thumbnailBuffer])
    );
  });

  Thumbo.thumbnailFromUrl(
    "https://example.com/image.svg",
    Thumbo.ImageFormat.Svg,
    20,
    20
  ).then((thumbnailBuffer) => {
    document.getElementById("img2").src = URL.createObjectURL(
      new Blob([thumbnailBuffer])
    );
  });
});

在幕后，thumbo 使用 Rust 的 tiny_skia & resvg 库编译成 Web Assembly 模块，以呈现 SVG在网络工作者中并将其转换为 PNG。参见 thumbo-core, thumbo

Demo ▶️ Source code

PS: 我是拇指的作者

在 Web Worker 中将 SVG 转换为 PNG

Convert SVG to PNG inside Web Worker

javascript

svg

web-worker