Web工作者内部将SVG转换为PNG

Question

我想将SVG转换为Web工作人员内部的PNG。我的问题是，DOM无法从工作人员内部访问，所以我不能将SVG绘制到画布或类似的地方。

Answer 1

您可以使用拇指

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])
    );
  });
});

在引擎盖下，拇指使用Rust的tiny_skia & resvg库编译到一个Web组装模块中，在web工作者中呈现SVG并将其转换为PNG。见拇指芯，拇指

演示▶️ 源代码

PS:我是“拇指”的作者

Answer 2

例如，您可以手动解析SVG并根据它构建一个位图，但是(!)这显然是个小问题，因为您必须构建一个SVG解析器和一个PNG编写器，更不用说行和两种模式多边形填充的栅格化代码了。抗混叠，图案，矩阵，组合，混合和梯度支撑.可能是个不错的周末项目:)

但是，更重要的一点是:您只能通过使用常规上下文(无webworker)的内置工具或可选地设置基于服务器的服务来完成这一任务。