nodejs之SVG转图片下载方案

原创 2015年07月06日 19:02:27

本文介绍在nodejs基础上,如何实现将svg转为png并下载的功能。


所需Webkit和node module简介:

  • phantomjs:一个基于WebKit的服务器端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

控制台出现如下界面:



在浏览器中输入地址`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() {
                            //下载图片到客户端
                            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




Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

创建和导出SVG的技巧

我们在响应式网页设计的工作中经常用到SVG,这个过程通常包括设计阶段和开发阶段。设计阶段通常是由不懂编程的设计师们完成的。因为原生SVG作为一种图像格式和文档格式,在图形编辑器中创建SVG效果的每一步...

【JavaScript】SVGTool: SVG常用方法库

HTML5经历了几年的沉沦之后引来一轮的潮流。在图形可视化方面,SVG同canvas相比在交互性方面有更大的优势。 市面上成熟的JavaScript框架已有很多,其中多有对SVG的封装。 本篇兼顾易用...

d3.js 可视化学习笔记(二)——svg导出png保存

先定义一个svg元素,把css代码写到svg元素里面,可以解决导出的图片不包含css样式的问题。 .axis path, .axis line{ fi...
  • Jeff_Le
  • Jeff_Le
  • 2016年12月04日 15:12
  • 2905

使用Python批量转换SVG文件为PNG或PDF文件

使用Python批量转换SVG文件为PNG或PDF文件
  • oatnehc
  • oatnehc
  • 2015年05月06日 16:24
  • 2701

使用nodejs自动生成前端项目组件

脚本编写背景写这个小脚本的初衷是,项目本身添加一个组件太繁琐了,比如我想要去建立一个login的组件,那么我需要手动去IDE中,创建index.js(组件出口文件),login.js(业务文件),lo...

node.js (感觉很好,虽转载一留后用)

关于node.js Node.js 是服务器端的 JavaScript 运行环境,它具有无阻塞(non-blocking)和事件驱动(event-driven)等的特色,Node.js 采用V8引擎...

NodeJS之SVG转图片下载方案

  • 2015年07月07日 16:29
  • 96KB
  • 下载

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

开发bs程序,学到的一些东西

web工程图片下载解决方案

微信公众号面对的是海量用户,有一些用户会主动给公众号发图片消息,现在有一个需求是:主动收集客户发送的图片,并能在后台形成查询表格和下载。该需求可以分为两个:1)解析图片消息入库;2)后台查询及下载;现...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:nodejs之SVG转图片下载方案
举报原因:
原因补充:

(最多只允许输入30个字)