本文介绍在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转图片下载方案的更多相关文章

  1. nodejs 将网上的图片下载到本地文件

    var request = require('request'); var fs = require('fs'); var img_src = 'https://www.baidu.com/img/b ...

  2. js实现svg图形转存为图片下载

    我们知道canvas画布可以很方便的js原生支持转为图片格式并下载,但是svg矢量图形则并没有这方面原生的支持.研究过HighChart的svg图形的图片下载机制,其实现原理大体是浏览器端收集SVG代 ...

  3. js实现svg图形转存为图片下载[转]

    我们知道canvas画布可以很方便的js原生支持转为图片格式并下载,但是svg矢量图形则并没有这方面原生的支持.研究过HighChart的svg图形的图片下载机制,其实现原理大体是浏览器端收集SVG代 ...

  4. svg保存为图片下载到本地

    今天给大家说一个将svg下载到本地图片的方法,这里我不得不吐槽一下,为啥博客园不可以直接上传本地文件给大家用来直接下载分享呢,好,吐槽到此为止! 这里需要用到一个js文件,名字自己起,内容如下: (f ...

  5. 基于one2team框架的Highcharts图表图片导出方案

    这篇文章已经没有什么意义了,新版的HIghcharts提供Java图片导出解决方案,你需要做的就是下个Maven,bulid一个war就Ok了.---addedy on 2012-11-15 多说一句 ...

  6. 前端js保存页面为图片下载到本地

    前端js保存页面为图片下载到本地 手机端点击下载按钮将页面保存成图片到本地 前端js保存页面为图片下载到本地的坑 html2canvas 识别 svg 解决方案 方案 html2canvas.js:可 ...

  7. js svg转图片格式

      1.情景展示 闲来无事的时候,发现chrome扩展程序里面有图像,本想下载下来,却发现文件格式是svg格式,如何将svg文件改成图片格式? chrome-extension://jlgkpaici ...

  8. iOS多图片下载

    iOS多图片下载.在cell里面下载图片.做了缓存优化. (app.icon是图片地址) // 先从内存缓存中取出图片 UIImage *image = self.images[app.icon]; ...

  9. python简易爬虫来实现自动图片下载

    菜鸟新人刚刚入住博客园,先发个之前写的简易爬虫的实现吧,水平有限请轻喷. 估计利用python实现爬虫的程序网上已经有太多了,不过新人用来练手学习python确实是个不错的选择.本人借鉴网上的部分实现 ...

随机推荐

  1. thinkphp下实现ajax无刷新分页

    1.前言 作为一名php程序员,我们开发网站主要就是为了客户从客户端进行体验,在这里,thinkphp框架自带的分页类是每次翻页都要刷新一下整个页面,这种翻页的用户体验显然是不太理想的,我们希望每次翻 ...

  2. 17-7-26-react-router入门

    完蛋了,上司最近都和颜悦色的,搞得我跑路的决心大大减退,不过还是要跑路.毕竟面向工资编程.今天一天基本都在挑项目的CSS,由于是别人哪里直接copy的,然后css我也直接copy的codepen上的源 ...

  3. AtCoder Regular Contest 103 Problem D Robot Arms （构造）

    题目链接  Problem D 给定$n$个坐标,然后让你构造一个长度为$m$的序列, 然后给每个坐标规定一个长度为$m$的序列,ULRD中的一个,意思是走的方向, 每次从原点出发按照这个序列方向,每 ...

  4. python3实践-从网站获取数据(Carbon Market Data-BJ) （pandas，bs4）

    自己边看边实践一些简单的实际应用,下面的程序是从某个网站上获取需要的数据. 在编写的过程中,通过学习陆续了解到一些方法,发现Python真的是很便捷. 尤其是用pandas获取网页中的表格数据,真的是 ...

  5. 【IO】同步、异步、阻塞、非阻塞的理解

    最近一直在看跟IO模型有关的内容,感觉差不多理解了,于是开始写这一篇总结博客.针对的操作系统为UNIX/LINUX,大致的体系结构如上图. 操作系统中的客体主要包括了:文件,Socket和进程,本文主 ...

  6. UGUI的优点新UI系统二 直观、易于使用

    UGUI的优点新UI系统二 直观.易于使用   对于UI控件,开发者可以直接使用鼠标在Scene视图里编辑它们的大小.位置和旋转角度,而无需编写任何代码,以Button为例,如图1-3.图1-4和图1 ...

  7. AGC 022 B - GCD Sequence

    题面在这里! 锻炼脑子的小构造题... 一开始被 a[]<=30000 且 序列 gcd = 1所困扰,但是发现这并没有什么,因为我接下来发现了一种总是能构造出 序列和是6的倍数的方案. 首先如 ...

  8. 【高斯消元解xor方程组】BZOJ2466-[中山市选2009]树

    [题目大意] 给出一棵树,初始状态均为0,每反转一个节点的状态,相邻的节点(父亲或儿子)也会反转,问要使状态均为1,至少操作几次? [思路] 一场大暴雨即将来临,白昼恍如黑夜!happy! 和POJ1 ...

  9. 20162318 2016-2017-2《Java程序设计》课堂实践项目

    20162318 2016-2017-2<Java程序设计>课堂实践项目 String类的使用 在String类中有一种split的方法.它可以把字符串分割为好几个小的字符串. 实践内容: ...

  10. 统计个位数的数目 Exercise07_07

    /** * @author 冰樱梦 * 时间:2018年下半年 * 题目:统计个位数的数目 * */ public class Exercise07_07 { public static void m ...