在Web Worker中将SVG转换为PNG

Convert SVG to PNG inside Web Worker

本文关键字：转换 PNG SVG 中将 Web Worker      更新时间：2023-09-26

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

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

但更重要的是：您只能使用内置工具使用常规上下文（none-webworker）或可选地设置基于服务器的服务来实现这一点。

您可以使用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工作程序中呈现SVG并将其转换为PNG。参见thumbo-core、thumbo-

Demo▶️源代码

PS：我是thumbo 的作者

相关文章：