首页 > 代码库 > nodejs之SVG转图片下载方案

nodejs之SVG转图片下载方案

2024-09-18 05:16:12   219人阅读

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

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

技术分享

在浏览器中输入地址`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转图片下载方案


联系
我们