在 Web Worker 中将 SVG 转换为 PNG

Question

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

Answer 1

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

不过，更重要的一点是：您只能使用带有常规上下文的内置工具（无网络工作人员）来执行此操作，也可以选择设置基于服务器的服务。

Answer 2

你可以用拇指

import Thumbo, { Transfer } from "thumbo";

Thumbo.init(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])
    );
  });
});

在幕后，thumo 使用 Rust 的tiny_skia和resvg库编译为 Web Assembly 模块，在 Web Worker 中渲染 SVG 并将其转换为 PNG。 见thumbo-core , thumbo