nodejs之SVG转图片下载方案

时间：2015-07-06 19:49:42 阅读：204 评论：0 收藏：0 [点我收藏+]

页面中有时用户需要保存或者下载显示的svg图，但是svg本身无法像图片一样“右键-图片另存为”这样保存，可以有多种方案，这里采用的是将svg转成图片再将其下载下来。

为实现这个方案，采用的是在node.js（若没有请到https://nodejs.org/ 下载安装）的基础上使用phantomJS提供第三方支持，phantomjs是一个支持DOM，canvas，svg等web标准提供本地支持的Webkit，详情请点击http://phantomjs.org/ ，下面以Fedora-based（Red Hat 4.4.7-4）为例，先配置环境，再看代码示例。

环境配置：
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
2.执行如下命令下载phantomjs源代码并编译

git clone git://github.com/ariya/phantomjs.git
cd phantomjs
git checkout 2.0
./build.sh
这个过程比较慢，需要三四十分钟，依操作系统的性能而定。编译完后生成的可执行文件在/root/phantomjs/bin/下，进入此目录后执行./phantom可运行。

3.设置path,执行如下命令

cd /etc
vim profile
打开profile文件后，按下insert键，光标移动到文件末尾，回车换行，加入下面的代码

export PATH="/root/phantomjs/bin:$PATH"
4.第三方库引用

创建package.json

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

package.json文件定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据），其中dependencies节点中定义了所依赖的库，执行nmp install会自动下载。详情请进入http://javascript.ruanyifeng.com/nodejs/packagejson.html#toc0

需要引入express和phantom库，它们的解释如下：

express库是用于开启http服务，详情请进入http://expressjs.com/zh/4x/api.html

phantom库是作为连接phantomjs和node的桥梁，因为phantomjs本身不是nodejs module，使得phantomjs无法和npm一起使用，有了这个桥梁就可以既使用npm又可以随心所欲的使用phantomjs的方法。详情请进入https://github.com/sgentle/phantomjs-node。

环境配置就此结束，如果一切顺利请看下面的代码示例：

代码示例：
1.文件结构

创建一个文件夹，例如phantomjsTest，里面有一个index.html，一个phantom.js和package.json文件。

index.html:

<!DOCTYPE HTML>
<html>
<head>
<title>Shell</title>
</head>
<body>
<div id="Viewport" style="display:inline-block;">
</div>
</body>
</html>
phantom.js

var phantom = require(‘phantom‘);
var fs = require(‘fs‘);
var express = require(‘express‘);
var app = express();

app.get(‘/‘, function(req, res) {
//svg html
var svgString = "<svg width=‘100‘ height=‘100‘><g><rect x=‘0‘ y=‘0‘ width=‘100‘ height=‘100‘ fill=‘black‘/></g></svg>";
//创建phantom实例
phantom.create(function(ph) {
//创建page实例
ph.createPage(function(page) {
//加载页面
page.open("index.html", function(status) {
//将svg加入到页面中,设置剪辑的矩形
page.evaluate(function(svgString) {
var selector = "#Viewport";
document.querySelector(selector).innerHTML = svgString;
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");
});
},

svgString);
});
});
});
});

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);
});
上面的例子就是将一段svg的html字符串

<svg width=‘100‘ height=‘100‘><g><rect x=‘0‘ y=‘0‘ width=‘100‘ height=‘100‘ fill=‘black‘/></g></svg>
插入到index.html页面中，这是个长宽各100的填充为黑色的矩形，然后利用phantomjs将其生成a.png图片，再下载下来，其中图片的名称可以通过

res.download(<sourcefilepath>, <downloadfilename>);
自定义。

运行：
上述一切准备就绪后，下面看看效果。执行命令:

npm install
node phantom.js
控制台出现如下界面：

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

打开test.png,显示

nodejs之SVG转图片下载方案

标签：node.js svg red hat flex phantom

原文地址：http://blog.csdn.net/cangkukuaimanle/article/details/46778041

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行