Node.js中如何转换含Base64图片的SVG为PNG/JPEG？

问题根源 #

Sharp依赖的librsvg对SVG中内嵌的Base64图片支持存在局限性，部分复杂编码或较大的Base64数据无法正确解析；同时默认渲染密度较低，导致输出画质模糊。

方案1：使用Puppeteer（推荐，画质最可靠） #

Puppeteer通过无头Chrome完整渲染SVG，能完美解析内嵌的Base64图片，且可精确控制输出分辨率和画质。

步骤： #

1. 安装依赖：

npm install puppeteer

2. 示例代码：

const puppeteer = require('puppeteer');
const fs = require('fs').promises;

async function convertSvgToImage(svgFilePath, outputFormat = 'png', quality = 100) {
    const svgContent = await fs.readFile(svgFilePath, 'utf8');
    const outputFilePath = svgFilePath.replace('.svg', `.${outputFormat}`);

    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    // 提取SVG原生宽高，无指定则用默认值
    const svgMatch = svgContent.match(/width="(\d+)" height="(\d+)"/);
    const width = svgMatch ? parseInt(svgMatch[1]) : 800;
    const height = svgMatch ? parseInt(svgMatch[2]) : 600;
    await page.setViewport({ width, height, deviceScaleFactor: 2 }); // 翻倍设备缩放比提升分辨率

    // 注入SVG到空白页面
    await page.setContent(`
        <html>
            <body style="margin:0; padding:0;">
                ${svgContent}
            </body>
        </html>
    `);

    // 配置截图参数
    const screenshotOptions = {
        path: outputFilePath,
        type: outputFormat,
        fullPage: true,
        omitBackground: outputFormat === 'png' // PNG保留透明背景
    };
    if (outputFormat === 'jpeg') {
        screenshotOptions.quality = quality; // JPEG画质（0-100）
    }

    await page.screenshot(screenshotOptions);
    await browser.close();

    return outputFilePath;
}

// 使用示例
convertSvgToImage('./input.svg', 'png')
    .then(path => console.log(`转换完成：${path}`))
    .catch(err => console.error('转换失败：', err));

优势： #

• 完美支持所有SVG特性（包括Base64内嵌图片、复杂滤镜、渐变等）
• 通过deviceScaleFactor可轻松实现2x/3x高分辨率输出
• 灵活控制PNG透明背景和JPEG压缩质量

方案2：使用svg2img（简化封装，可选） #

svg2img封装了Puppeteer或Canvas引擎，使用更简洁，推荐选择Puppeteer模式确保兼容性。

步骤： #

1. 安装依赖：

npm install svg2img puppeteer

2. 示例代码：

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

async function convertSvg(svgFilePath) {
    const svgBuffer = fs.readFileSync(svgFilePath);

    // 转高分辨率PNG
    await new Promise((resolve, reject) => {
        svg2img(svgBuffer, {
            format: 'png',
            puppeteer: true,
            width: 1600, // 自定义输出宽度，按SVG比例自动缩放
            height: 1200
        }, (err, pngBuffer) => {
            if (err) reject(err);
            fs.writeFileSync(svgFilePath.replace('.svg', '.png'), pngBuffer);
            resolve();
        });
    });

    // 转最高画质JPEG
    await new Promise((resolve, reject) => {
        svg2img(svgBuffer, {
            format: 'jpeg',
            puppeteer: true,
            quality: 100,
            width: 1600,
            height: 1200
        }, (err, jpegBuffer) => {
            if (err) reject(err);
            fs.writeFileSync(svgFilePath.replace('.svg', '.jpeg'), jpegBuffer);
            resolve();
        });
    });
}

// 使用示例
convertSvg('./input.svg')
    .then(() => console.log('转换完成'))
    .catch(err => console.error(err));

方案3：优化Sharp尝试（仅适用于简单Base64场景） #

如果坚持使用Sharp，可尝试提高渲染密度，但仅能解决部分简单Base64内嵌场景：

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, {
        density: 300 // 提升渲染密度，改善画质
    })
    .png({ quality: 100 })
    .toFile(outputFilePath);

    return outputFilePath;
}

注意： #

• 此方案对复杂Base64图片（如带Alpha通道、大尺寸数据）支持有限，仍可能出现缺失或渲染错误
• 画质提升效果依赖density参数的设置值

内容的提问来源于stack exchange，提问作者Muhammad Usman