标签：tom ack 操作系统 rect 十分 矢量图 listening turn article
本文介绍在nodejs基础上。怎样实现将svg转为png并下载的功能。
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
git clone git://github.com/ariya/phantomjs.git cd phantomjs git checkout 2.0 ./build.sh
这个过程比較慢，须要三四十分钟。依操作系统的性能而定。
编译完后生成的可运行文件在/loginname/phantomjs/bin/下。进入此文件夹后运行./phantom可运行。
{
"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"
}<!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图形。就是须要转换下载的部分。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>);
标签：tom ack 操作系统 rect 十分 矢量图 listening turn article
原文地址：http://www.cnblogs.com/yfceshi/p/6785061.html
