如何在 Node.js 中将 SVG 转换为 PNG，包括 base64 编码的图像？-解网

问：

你好 Stack Overflow 社区，

我正在处理一个Node.js项目，我需要将SVG文件转换为PNG和JPEG格式。我的 SVG 文件的独特之处在于它们包含编码为 base64 数据的图像。我尝试过为此使用 sharp 库，但我遇到了 base64 图像无法正确渲染或最终 PNG 输出中丢失的问题。此外，我需要转换以保持最终 PNG 图像的高质量。

以下是我的具体要求：

该解决方案应该可以在 Node.js 环境中实现。
它需要正确处理带有嵌入式 base64 编码图像的 SVG。
PNG和JPEG输出的质量应该很高，保持原始SVG的保真度。

我愿意使用其他可以从 Node.js 应用程序调用的 Node.js 库或外部工具。任何示例或指针将不胜感激！

提前感谢您的帮助！

我尝试使用以下方法：

const sharp = require('sharp');
const fs = require('fs');

async function convertSvgToPng(svgFilePath) {
    const outputFilePath = svgFilePath.replace('.svg', '.png');
    const svgBuffer = fs.readFileSync(svgFilePath);

    await sharp(svgBuffer)
        .png()
        .toFile(outputFilePath);

    return outputFilePath;
}

此代码似乎不能很好地处理 SVG 中的 base64 编码图像，并且质量也不达标。

节点 .js 图像 svg png jpeg

 async function getQRForGroup(groupuuid, batch) {
  //TODO: fix this for the new host, and the new gallery URL 
  var sURLForGroup = config.BASE_HREF + '/gallery/view/' + groupuuid;
  //var b64String =  async sURLForGroup => await QRCode.toDataURL(sURLForGroup);
  var b64String = null;
  var fontSize = 18;
  var textColor = "#000000";
  var text = "Tachiba";
  var qrCodeUrl = await QRCode.toDataURL(sURLForGroup, { width: 500, margin: 5 });


  // Use sharp to open the generated QR code image
  var b64Str = await sharp(Buffer.from(qrCodeUrl.split(',')[1], 'base64'))
    .jpeg() // You can specify the output format here (e.g., png, webp, etc.)
    .toBuffer()
    .then((inputBuffer) => {
      // Use the buffer to add text to the image using the composite method
      return sharp(inputBuffer)
        .jpeg()
        .composite([
          {
            //viewbox="10 5 100 100"
            input: Buffer.from(`<svg ><text x="0" y="33" font-size="45" fill="${textColor}">${text}</text></svg>`),
            gravity: 'south', // Position of the text on the image
          },
          {
            input: Buffer.from(`
                <svg width="120" height="80">
                <rect width="100%" height="100%" fill="#ffffff"/>
                <text text-anchor="middle" alignment-baseline="central" x="60" y="55" font-size="38" fill="${textColor}">${batch}</text>
                </svg>`),
            gravity: 'center', // Position of the text on the image
          }
        ])
        .toBuffer();
    })
    .then((outputBuffer) => {
      // Convert the final image buffer to a Base64-encoded string
      b64String = outputBuffer.toString('base64');
      return b64String;
    })
    .catch((err) => {
      errorLogger('Error adding text to the QR code image:', err);
    });
  return "data:image/png;base64," + b64Str;
}

请检查。

上一个：在 Android 中解码 Harware 加速图像（png 或 jpg）？

下一个：Photoshop 脚本更改为 .jsx 代码以存储具有透明背景的 PNG

如何在 Node.js 中将 SVG 转换为 PNG，包括 base64 编码的图像？

How to Convert SVG to PNG in Node.js, Including Base64-Encoded Images?

评论