nodejs之SVG转图片下载方案

来源：互联网发布：淘宝喵喵官换机编辑：程序博客网时间：2024/05/29 16:28

本文介绍在nodejs基础上，如何实现将svg转为png并下载的功能。

所需Webkit和node module简介：

phantomjs:一个基于WebKit的服务器端JavaScript API，它基于 BSD开源协议发布。PhantomJS无需浏览器的支持即可实现对Web的支持，且原生支持各种Web标准，如DOM 处理、JavaScript、CSS选择器、JSON、Canvas和可缩放矢量图形SVG，由于在linux下的二进制库还在准备中，所以需要单独下载源码编译。
express:用于开启http服务。
phantom: 连接phantomjs和node的bridge，因为phantomjs本身不是nodejs module，有了这个bridge就可以既使用npm又可以使用phantomjs的方法。

下面介绍环境配置和如何运行，最后进行代码分析，本文所使用操作系统：CentOS 6.5

环境配置：

step 1.执行如下命令安装phantomjs编译工具

sudo yum -y install gcc gcc-c++ make flex bison gperf ruby \  openssl-devel freetype-devel fontconfig-devel libicu-devel sqlite-devel \  libpng-devel libjpeg-devel

step 2.执行如下命令下载phantomjs源代码并编译

git clone git://github.com/ariya/phantomjs.gitcd phantomjsgit checkout 2.0./build.sh

这个过程比较慢，需要三四十分钟，依操作系统的性能而定。

编译完后生成的可执行文件在/loginname/phantomjs/bin/下，进入此目录后执行./phantom可运行。

step 3.设置path

在path中加入下面代码

export PATH="/loginname/phantomjs/bin:$PATH"

运行

下载附件test.rar解压后，cd进入test文件夹，执行命令:

npm installnode index.js

控制台出现如下界面：

在浏览器中输入地址`http://host:3040/download`(host为linux的IP)，即可下载下来一张图片。

代码分析

package.json:

{  "name": "test",  "version": "1.1.1",  "description": "convert svg to image on server side by phantomjs and nodejs",  "main": "index.js",  "dependencies": {    "express": "latest",    "phantom": "latest"  },  "keywords": [    ""  ],  "author": "",  "license": "no"}

package.json文件定义了这个项目所需要的各种模块，其中dependencies节点中定义了所依赖的node module，例如本例中的express和phantom。

template.html:

<!DOCTYPE HTML><html><head>    <title>Shell</title></head><body>    <div id="Viewport" style="display:inline-block;">        <svg width='100' height='100'>            <g>                <rect x='0' y='0' width='100' height='100' fill='black' />            </g>        </svg>    </div></body></html>

里面包含了一个长宽各100填充为黑色的svg图形，就是需要转换下载的部分。

index.js:

var phantom = require('phantom');var fs = require('fs');var express = require('express');var app = express();app.get('/download', function(req, res) {    //创建phantom实例    phantom.create(function(ph) {        //创建page实例        ph.createPage(function(page) {            //加载页面            page.open("template.html", function(status) {                //设置剪辑的矩形                page.evaluate(function() {                        var selector = "#Viewport";                        return document.querySelector(selector).getBoundingClientRect();                    },                    function(result) {                        //设置剪辑框                        page.set("clipRect", result);                        //生成png图片                        page.render('a.png', {                            format: 'png',                            quality: '100'                        }, function() {                            //下载图片到客户端                            res.download('a.png', "test.png");                        });                    });            });        });    });});//设置http监听var server = app.listen(3040, function() {    var host = server.address().address;    var port = server.address().port;    console.log('Example app listening at http://%s:%s', host, port);});

这段代码使用phantomjs的page.render将svg部分生成a.png图片，再下载下来，其中图片的名称可以通过以下代码自定义

res.download(<sourcefilepath>, <downloadfilename>);

参考

package.json说明：http://javascript.ruanyifeng.com/nodejs/packagejson.html#toc0

1 0