SVG作为SVG的图像标签在使用sharp时不起作用

Question

我正在使用sharp 转换文件，但Sharp 给了我一个空的png 文件。

我想使用 base64 格式的 SVG 图像作为<image> 标签的来源，并希望将其转换为 png 文件。

这里有一个例子来展示我正在尝试做的事情；

const sharp = require('sharp');
sharp(Buffer.from(<look below js file to see the SVG>))
    .toFormat('png')
    .toFile('output.png')

这里有一个JS 来展示我尝试做的事情。基本上，我想将这个 SVG 转换为一个 png 文件，使用 sharp 但 sharp 给了我一个空的 png。

Answer 1

看起来sharp 不能很好地处理外部图像。

您可以在将 SVG 传递给 sharp 之前尝试“扁平化”它。

快速而肮脏的实现

这很容易出错。理想情况下，您会使用 Cheerio 之类的东西来解析和修改 SVG 输入。

它还仅保留 x、y、width、height 和 opacity 属性。其他属性需要进一步更改。

function flattenSVG (svg) {
  const images = svg.match(/<image [^>]+>/g);
  if (!images || images.length < 1) {
    return svg;
  }

  var result = svg;
  images.forEach(image => {
    const [,data] = image.match(/ xlink:href="data:image\/svg\+xml;base64,([^"]+)"/) || [];
    if (!data) {
      return;
    }

    const innerSVG = Buffer.from(data, 'base64').toString();
    const [,width] = image.match(/ width="([^"]+)"/) || [];
    const [,height] = image.match(/ height="([^"]+)"/) || [];
    const [,opacity] = image.match(/ opacity="([^"]+)"/) || [];
    const [,x] = image.match(/ x="([^"]+)"/) || [];
    const [,y] = image.match(/ y="([^"]+)"/) || [];
    const [header] = innerSVG && innerSVG.match(/<svg[^>]+>/) || [];
    const fixedHeader = header
      .replace(/ (x|y|width|height)="([^"]+)"/g, '')
      .replace('<svg', `<svg x="${x}" y="${y}" width="${width}" height="${height}" opacity="${opacity || 1.0}"`);
    const replacement = innerSVG && innerSVG.replace(header, fixedHeader);
    result = result.replace(image, replacement);
  });

  return result;
}

所以，在你的代码中，你会使用类似的东西：

sharp(Buffer.from(flattenSVG(testSVG)))
      .toFormat('png')
      .toFile('output.png')

您可以在Glitch 处检查工作代码（出于测试目的，它使用缓冲区而不是文件输出，因此略有不同）。