基于phantomjs之SVG转png，SVG转图片，网页截图

为什么我要这样做

起因是这样的，我把svg图片插入到ppt里面用的好好的，结果没想到在svg里面插入一张图片组成新的svg（网页PS），就over了，为什么要插入ppt，因为我在做一个web端ppt在线编辑。

svg中代码

<div style='width: 49.8px ;height: 109.3px;'><?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 49.8 109.3" enable-background="new 0 0 49.8 109.3" xml:space="preserve">
	<path fill="#10212F" d="M49.8,103c0,3.5-2.8,6.3-6.3,6.3H6.3c-3.5,0-6.3-2.8-6.3-6.3V6.3C0,2.8,2.8,0,6.3,0h37.2c3.5,0,6.3,2.8,6.3,6.3V103z" class="color color-1" data-color="#10212F"></path>
    <circle opacity="0.2" cx="24.9" cy="101.2" r="4"></circle>
    <clipPath id="nuts_clippath_348eea0b-4d3f-4ec8-810c-041ac9b84f2b">
        <rect x="2.3" y="13.9" fill="#91C84F" width="45.3" height="78.1"></rect>
    </clipPath>
    <image class="placeholder" clip-path="url(#nuts_clippath_348eea0b-4d3f-4ec8-810c-041ac9b84f2b)" xlink:href="http://dataplat.centaline.com.cn/images//whimg/abf7ae655655f320858b2218ce3b3a01.jpg" x="-100%" y="-100%" width="300%" height="300%"></image>
    <rect x="2.3" y="13.9" width="45.3" height="78.1" class="outline" fill="none"></rect>
    <path opacity="0.2" d="M32.6,8.1c0,0.7-0.6,1.3-1.3,1.3H18.5c-0.7,0-1.3-0.6-1.3-1.3l0,0c0-0.7,0.6-1.3,1.3-1.3h12.8C32,6.8,32.6,7.4,32.6,8.1L32.6,8.1z"></path>
    <path opacity="0.1" fill="#FFFFFF" d="M43.5,0H11.8l38,94.6V6.3C49.8,2.8,47,0,43.5,0z"></path>
</svg></div>

代码

用到的包
const childProcess = require(‘child_process’) node调命令行的包
const phantomjs = require(‘phantomjs’) 可有可无，主要获取phantomjs安装路径

function rendering(svghtml,cb) {
    var newid=uuid.v4();
    var svg= path.join(__dirname, '../../../../public/images/whimg/temp/'+newid+'.html') ;
    var png= path.join(__dirname, '../../../../public/images/whimg/temp/'+newid+'.png');
    var viewBox =svghtml.substring(svghtml.indexOf("viewBox=") + 9,svghtml.indexOf("enable")-2)
    var viewBoxarr=[0,0,500,500]
    if(viewBox!=""){
        viewBoxarr =viewBox.split(' ')
    }
    svghtml="<div style='width: 500px ;height: "+viewBoxarr[3]*500/viewBoxarr[2]+"px;'>"+svghtml+"</div>"
    //将svg保存为html，并用div包着，便于定位，如果不包，会截不全
    fs.writeFile( svg, svghtml, function(err) {
        if(err) {
            return console.log(err);
        }
        var childArgs = [
            path.join(__dirname, 'phantomjs-script-index_tab.js'),
            env_opt.service_url + '/images/whimg/temp/' + newid + '.html',
            png

        ]
        //使用cmd命令行调用phantomjs脚本，并传参数
        // E:\项目\中原\dataplat\src\node_modules\phantomjs\lib\phantom\bin\phantomjs.exe E:\项目\中原\dataplat\src\routes\daer_standard_data\routes\sz_data\phantomjs-script-index_tab.js http:/127.0.0.1:3000/images/whimg/temp/04ff2181-9994-4ef0-98b4-0f33202ce8a6.html E:\项目\中原\dataplat\src\public\images\whimg\temp\04ff2181-9994-4ef0-98b4-0f33202ce8a6.png
        childProcess.execFile(binPath, childArgs, function(err, stdout, stderr) {
            cb({url:png})
            deletepnglist.push(svg)
            deletepnglist.push(png)
        })
    });
}

phantomjs的脚本phantomjs-script-index_tab.js

"use strict";
var page = require('webpage').create(),
    system = require('system'),
    address,newid;

address = system.args[1];
newid = system.args[2];


page.viewportSize = { width: 1024, height: 600 };
page.open(address, function (status) {
    // page.evaluate(function () {
    //     document.getElementsByTagName("div").item(0).style.height=document.getElementsByTagName('svg').item(0).getAttribute("viewBox")
    //     document.getElementsByTagName("div").item(0).style.width=document.getElementsByTagName('svg').item(0).getAttribute("viewBox")
    //
    // });
    // 预留一定的渲染时间
    window.setTimeout(function () {
        // // 通过在JS获取页面的渲染高度
        var rect = page.evaluate(function () {
            return  document.getElementsByTagName("svg").item(0).getBoundingClientRect();
        });
        // 按照实际页面的高度，设定渲染的宽高
        page.clipRect = {
            top:    rect.top,
            left:   rect.left,
            width:  rect.width,
            height: rect.height
        };

        page.render(newid);
        phantom.exit();
    }, 200);



});

// page.open('http://example.com/', function() {
//     page.render('github.png');

// });

效果