页面中有时用户需要保存或者下载显示的svg图，但是svg本身无法像图片一样“右键-图片另存为”这样保存，可以有多种方案，这里采用的是将svg转成图片再将其下载下来。为实现这个方案，采用的是在node.js（若没有请到https://nodejs.org/ 下载安装）的基础上使用phantomJS提供第三方支持，phantomjs是一个支持DOM，canvas，svg等web标准提供本地支持的Webkit，详情请点击 ，下面以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-devel2.执行如下命令下载phantomjs源代码并编译git clone git://github.com/ariya/phantomjs.gitcd phantomjsgit checkout 2.0./build.sh这个过程比较慢，需要三四十分钟，依操作系统的性能而定。 编译完后生成的可执行文件在/root/phantomjs/bin/下，进入此目录后执行./phantom可运行。3.设置path,执行如下命令cd /etcvim 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会自动下载。详情请进入#toc0需要引入express和phantom库，它们的解释如下：express库是用于开启http服务，详情请进入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.jsvar phantom = require(‘phantom’);var fs = require(‘fs’);var express = require(‘express’);var app = express();app.get(‘/’, function(req, res) { //svg html var svgString = "<svg><g><rect x=’0′ y=’0′ 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 %s%s’, host, port);});上面的例子就是将一段svg的html字符串<svg><g><rect x=’0′ y=’0′ fill=’black’/></g></svg>插入到index.html页面中，这是个长宽各100的填充为黑色的矩形，然后利用phantomjs将其生成a.png图片，再下载下来，其中图片的名称可以通过res.download(<sourcefilepath>, <downloadfilename>);自定义。运行：上述一切准备就绪后，下面看看效果。 执行命令:npm installnode phantom.js控制台出现如下界面：在浏览器中输入地址:3040(host为linux的IP)，即可下载下来一张图片。打开test.png,显示
版权声明：本文为博主原创文章，未经博主允许不得转载。
害怕攀登高峰的人，永远在山下徘徊。
