无法从 SVG 创建位图

Posted 2023-03-24

【中文标题】无法从 SVG 创建位图

【英文标题】：Cannot create bitmap from SVG

【发布时间】：2021-11-17 16:33:12

【问题描述】：

我正在尝试从 SVG 文件创建位图，但出现以下错误：

Uncaught (in promise) DOMException: The source image could not be decoded.

我正在使用以下代码：

const response = await fetch(MARKER_PATH);
const svgStr = await response.text();
const svgBlob = new Blob([svgStr],  type: 'image/svg+xml' );
this.marker = await createImageBitmap(svgBlob);

可以在link 找到标记代码。 SVG 是有效的（或者我认为）。我可以正确地看到它，如果我在画布上绘制图像，那么它可以完美地工作，所以我不知道它为什么会失败。

我认为可能与编码有关，但这也没有意义，因为 SVG 可以在其他环境中正确加载。知道发生了什么吗？

【问题讨论】：

在一些 id 值中有一些相当不寻常的字符。

您得到的错误是因为如果 ids 中有奇怪的字符。除此之外，我正在努力让createImageBitmap() 使用 SVG，即使它应该是可能的，因为我读到了createImageBitmap() - Web APIs | MDN。

【参考方案1】：

目前没有浏览器不支持从保存 SVG 文档的 Blob 创建 ImageBitmap，但根据规范，它们应该支持。I wrote a monkey-patch 确实填补了这个漏洞（和其他漏洞），您可以使用：

fetch("https://gist.githubusercontent.com/antoniogamiz/d1bf0b12fb2698d1b96248d410bb4219/raw/b76455e193281687bb8355dd9400d17565276000/marker.svg")
  .then( r => r.blob() )
  .then( createImageBitmap )
  .then( console.log )
  .catch( console.error );

<script src="https://cdn.jsdelivr.net/gh/Kaiido/createImageBitmap/dist/createImageBitmap.js"></script>

基本上，对于这种情况，我使用应该可以工作的虚拟 Blob 执行第一个（异步）测试，如果它检测到 UA 不支持此功能，则带有 type: "image/svg+xml" 的 Blob 输入将转换为htmlImageElement 指向 Blob:// 的 Blob URI。 这意味着此修复不适用于 Workers。

另请注意，此方法仅支持具有固有宽度和高度（即绝对 width 和 height 属性）的 SVG 图像。