在 Web Worker 中将 SVG 转换为 PNG

Question

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

Answer 1

您可以使用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 模块，在 Web Worker 中渲染 SVG 并将其转换为 PNG。请参阅 thumbo-core、thumbo

演示 ▶️ 源代码

PS：我是thumbo的作者

Answer 2

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

更严重的是：您只能使用常规上下文（非 Webworker）使用内置工具来执行此操作，或者选择设置基于服务器的服务。

Answer 3

Chrome 不打算支持从 SVG blob 开始在 Service Worker 中创建

ImageBitmap

：https://issues.chromium.org/issues/41250699

如果您需要在 Web 扩展中执行此操作，您可以使用

chrome.offscreen

API 并像平常在网页上一样使用 DOM。