nodejs之SVG转图片下载方案
本文介绍在nodejs基础上。怎样实现将svg转为png并下载的功能。
所需Webkit和node module简单介绍：
- phantomjs:一个基于WebKit的server端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.git cd phantomjs git checkout 2.0 ./build.sh
这个过程比較慢，须要三四十分钟。依操作系统的性能而定。
编译完后生成的可运行文件在/loginname/phantomjs/bin/下。进入此文件夹后运行./phantom可运行。
step 3.设置path
在path中增加以下代码
export PATH="/loginname/phantomjs/bin:$PATH"
执行
在浏览器中输入地址`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() {
//下载图片到client
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
