本文介绍在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"

执行

下载附件test.rar解压后。cd进入test目录。运行命令:

npm install
node index.js

控制台出现例如以下界面：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

在浏览器中输入地址`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

nodejs之SVG转图片下载方案的更多相关文章

nodejs 将网上的图片下载到本地文件
var request = require('request'); var fs = require('fs'); var img_src = 'https://www.baidu.com/img/b ...
js实现svg图形转存为图片下载
我们知道canvas画布可以很方便的js原生支持转为图片格式并下载,但是svg矢量图形则并没有这方面原生的支持.研究过HighChart的svg图形的图片下载机制,其实现原理大体是浏览器端收集SVG代 ...
js实现svg图形转存为图片下载[转]
我们知道canvas画布可以很方便的js原生支持转为图片格式并下载,但是svg矢量图形则并没有这方面原生的支持.研究过HighChart的svg图形的图片下载机制,其实现原理大体是浏览器端收集SVG代 ...
svg保存为图片下载到本地
今天给大家说一个将svg下载到本地图片的方法,这里我不得不吐槽一下,为啥博客园不可以直接上传本地文件给大家用来直接下载分享呢,好,吐槽到此为止! 这里需要用到一个js文件,名字自己起,内容如下: (f ...
基于one2team框架的Highcharts图表图片导出方案
这篇文章已经没有什么意义了,新版的HIghcharts提供Java图片导出解决方案,你需要做的就是下个Maven,bulid一个war就Ok了.---addedy on 2012-11-15 多说一句 ...
前端js保存页面为图片下载到本地
前端js保存页面为图片下载到本地手机端点击下载按钮将页面保存成图片到本地前端js保存页面为图片下载到本地的坑 html2canvas 识别 svg 解决方案方案 html2canvas.js:可 ...
js svg转图片格式
1.情景展示闲来无事的时候,发现chrome扩展程序里面有图像,本想下载下来,却发现文件格式是svg格式,如何将svg文件改成图片格式? chrome-extension://jlgkpaici ...
iOS多图片下载
iOS多图片下载.在cell里面下载图片.做了缓存优化. (app.icon是图片地址) // 先从内存缓存中取出图片 UIImage *image = self.images[app.icon]; ...
python简易爬虫来实现自动图片下载
菜鸟新人刚刚入住博客园,先发个之前写的简易爬虫的实现吧,水平有限请轻喷. 估计利用python实现爬虫的程序网上已经有太多了,不过新人用来练手学习python确实是个不错的选择.本人借鉴网上的部分实现 ...

随机推荐

ubuntu安装wine
1.安装源 sudo add-apt-repository ppa:wine/wine-builds sudo apt-get update 2.安装wine sudo apt-get install ...
字符串匹配&Rabin-Karp算法讲解
问题描述: Rabin-Karp的预处理时间是O(m),匹配时间O( ( n - m + 1 ) m )既然与朴素算法的匹配时间一样,而且还多了一些预处理时间,那为什么我们还要学习这个算法呢?虽然Ra ...
Java集合之ArrayList与LinkList
注:示例基于JDK1.8版本参考资料:Java知音公众号本文超长,也是搬运的干货,希望小伙伴耐心看完. Collection集合体系 List.Set.Map是集合体系的三个接口. 其中List和 ...
Codeforces 538 F. A Heap of Heaps
$>Codeforces \space 538 F. A Heap of Heaps<$ 题目大意 :给出 $n$ 个点,编号为 $1 - n$ ,每个点有点权,将这些点构建成 ...
【构造】【贪心】hdu6090 Rikka with Graph
给你n个点,让你连m条边,使得任意两两点对之间的最短路的和最小(两点若不可达,最短路记作n). 初始时ans=n*n*(n-1). 先尽量连成菊花图,每连一次让答案减小2*((n-2)*(i-1)+( ...
【贪心】【堆】AtCoder Grand Contest 018 C - Coins
只有两维的时候,我们显然要按照Ai-Bi排序,然后贪心选取. 现在,也将人按照Ai-Bi从小到大排序,一定存在一个整数K,左侧的K个人中,一定有Y个人取银币,K-Y个人取铜币: 右侧的X+Y+Z-K个 ...
【树形dp】vijos P1180 选课
题解: http://www.cppblog.com/rakerichard/articles/105004.html 惊了,讨论子树大小能否dp真鸡儿麻烦,按照上面那份题解,可以不用分这么多类,可以 ...
零起点学算法09——继续练习简单的输入和计算（a-b)
#include<stdio.h> int main() { int a,b; scanf("%d %d",&a,&b); printf("% ...
keytool工具生成自签名证书并且通过浏览器导入证书
1.生成服务器证书库 keytool -genkey -alias tomcat -keypass changeit -keyalg RSA -keysize 1024 -validity 365 - ...
node webkit (nw.js) 无法调试的结局方案之一
之前做过nw项目,当时主要内容是由别人做的!过后回到家中,自己研究了下这方面.结果发现我自己写的nw 客户端不可以调试!在网上各种找办法,没找到,深感绝望,突然看到 (https://github.c ...

nodejs之SVG转图片下载方案