Node.js 两种方法在本地实现 SVG to Image

canvg2.0

原址

https://github.com/canvg/canvg

获取

npm install [email protected] canvas@^2 jsdom@^13 xmldom@^0

使用
const fs = require('fs');
const canvg = require('canvg');
const { createCanvas } = require('canvas'); // 使用 npm i canvas 来获取

const inputName = 'test.svg';
const outputName = inputName.replace('.svg','.png');
try{
    (async() => {
        fs.readFile(inputName ,'utf-8', function(err, data) {
            if (err) {
                // 读取文件失败
                throw err;
            }
            const canvas = createCanvas();
            canvg(canvas, data.toString(), {
                ignoreMouse: true,
                ignoreAnimation: true,
                renderCallback: function () {
                    var base64Data = canvas.toDataURL('image/png').replace(/^data:image\/\w+;base64,/, "");
                    var dataBuffer = new Buffer.from(base64Data, 'base64');
                    fs.writeFile(outputName, dataBuffer, function(err) {
                        if (err) {
                            throw err;
                        }
                        console.log(`output file name : ${outputName}`);
                    });
                }
            });
        });
    })();
}
catch{
    console.log('args error');
}
注意
  • 函数 build() 中的函数 svg.loadXmlDoc() 中的代码 if (svg.ImagesLoaded()) 处,图像未下载完成便尝试渲染,会使转换的 canvas 缺少一些 image 元素,使用间隔计时器解决
// if (svg.ImagesLoaded()) {
//  waitingForImages = false;
//  draw();
// }
var drawInvlID = setInterval(function () {
    if (svg.ImagesLoaded()) {
        waitingForImages = false;
        draw();
        clearTimeout(drawInvlID);
    }
}, 1);
  • 函数 build() 中的函数 svg.ToNumberArray() 中的代码 var a = (s || '').match(/-?(\d+(\.\d+)?|\.\d+)(?=\D|$)/gm) || []; 会在遇到科学记数法时出错,使用 canvg1.5 的代码替换可正常工作
// var a = (s || '').match(/-?(\d+(\.\d+)?|\.\d+)(?=\D|$)/gm) || [];
var a = svg.trim(svg.compressSpaces((s || '').replace(/,/g, ' '))).split(' ');
  • 本人测试时,canvg 中使用过大的 元素会使其中的 “失踪”(长宽比为 1 的情况下以 16384 * 16384 为界),如有解决方法还望指教

使用 convert-svg-to-png

原址

https://github.com/neocotic/convert-svg/tree/master/packages/convert-svg-to-png

获取

npm install --global convert-svg-to-png

使用
const convertFile = require('convert-svg-to-png');
const args = process.argv.slice(2);
try{
  (async() => {
    const outputFilePath = await convertFile(args[0],{"width":args[1],"height":args[2]});    
    console.log(`outputFilePath:${outputFilePath}`);
  })();
}
catch{
  console.log('args error');
}
注意
  • 本人测试中在某些情况下会出现中文乱码的问题,经查验并非编码问题——在删掉一些元素后可以正常显示中文,复原后依旧乱码,如有解决方法还望指教

你可能感兴趣的:(Node.js 两种方法在本地实现 SVG to Image)