SVG到PNG服务器端 – 使用node.js
我试图按照这个教程将d3.js SVG Vis转换为PNG服务器端（使用Node.js） http://eng.wealthfront.com/2011/12/converting-dynamic-svg-to- PNG-with.html
链接到完整的代码： https ： //gist.github.com/1509145
但是，每当我尝试请求加载我的页面时，我总是收到此错误
/Users/me/Node/node_modules/jsdom/lib/jsdom.js:171 features = JSON.parse(JSON.stringify(window.document.implementation._fea ^ TypeError: Cannot read property 'implementation' of undefined at exports.env.exports.jsdom.env.processHTML (/Users/dereklo/Node/node_modules/jsdom/lib/jsdom.js:171:59) at Object.exports.env.exports.jsdom.env (/Users/dereklo/Node/node_modules/jsdom/lib/jsdom.js:262:5) at Server.<anonymous> (/Users/dereklo/Node/Pie/pie_serv.js:26:9) at Server.EventEmitter.emit (events.js:91:17) at HTTPParser.parser.onIncoming (http.js:1785:12) at HTTPParser.parserOnHeadersComplete [as onHeadersComplete] (http.js:111:23) at Socket.socket.ondata (http. 有人知道为什么这可能是？ 我已经安装了jsdom模块，所以我不知道是什么原因导致这些问题…在此先感谢。
编辑
这是我用来实现node.js服务器的代码。 我最近的问题是在这个源下面…
var http = require('http'), url = require('url'), jsdom = require('jsdom'), child_proc = require('child_process'), w = 400, h = 400, __dirname = "Users/dereklo/Node/pie/" scripts = ["/Users/dereklo/Node/pie/d3.min.js", "/Users/dereklo/Node/pie/d3.layout.min.js", "/Users/dereklo/Node/pie/pie.js"], //scripts = ["./d3.v2.js", // "./d3.layout.min.js", // "./pie.js"] htmlStub = '<!DOCTYPE html><div id="pie" style="width:'+w+'px;height:'+h+'px;"></div>'; http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'image/png'}); var convert = child_proc.spawn("convert", ["svg:", "png:-"]), values = (url.parse(req.url, true).query['values'] || ".5,.5") .split(",") .map(function(v){return parseFloat(v)}); convert.stdout.on('data', function (data) { res.write(data); }); convert.on('exit', function(code) { res.end(); }); jsdom.env({features:{QuerySelector:true}, html:htmlStub, scripts:scripts, done:function(errors, window) { var svgsrc = window.insertPie("#pie", w, h, values).innerHTML; console.log("svgsrc",svgsrc); //jsdom's domToHTML will lowercase element names svgsrc = svgsrc.replace(/radialgradient/g,'radialGradient'); convert.stdin.write(svgsrc); convert.stdin.end(); }}); }).listen(8888, "127.0.0.1"); console.log('Pie SVG server running at http://127.0.0.1:8888/'); console.log('ex. http://127.0.0.1:8888/?values=.4,.3,.2,.1');
最新的问题
events.js:66 throw arguments[1]; // Unhandled 'error' event ^ Error: This socket is closed. at Socket._write (net.js:519:19) at Socket.write (net.js:511:15) at http.createServer.jsdom.env.done (/Users/dereklo/Node/Pie/pie_serv.js:38:19) at exports.env.exports.jsdom.env.scriptComplete (/Users/dereklo/Node/node_modules/jsdom/lib/jsdom.js:199:39)
如果你拿出“使用node.js”的规定，这可能certificate是对你的问题有用的答案。 如果它不能帮助你，也许以后的访问者会发现它很有趣。
我一直在努力解决这个问题（服务器端的D3光栅化），我发现PhantomJS是最好的解决scheme。
server.js：
var page = require('webpage').create(), renderElement = require('./renderElement.js'), Routes = require('./Routes.js'), app = new Routes(); page.viewportSize = {width: 1000, height: 1000}; page.open('./d3shell.html'); app.post('/', function(req, res) { page.evaluate(new Function(req.post.d3)); var pic = renderElement(page, '#Viewport'); res.send(pic); }); app.listen(8000); console.log('Listening on port 8000.');
Routes.js： https ：//gist.github.com/3061477
renderElement.js： https ：//gist.github.com/3176500
d3shell.html应该看起来像这样：
<!DOCTYPE HTML> <html> <head> <title>Shell</title> </head> <body> <div id="Viewport" style="display: inline-block"></div> <script src="http://cdnjs.cloudflare.com/ajax/libs/d3/2.8.1/d3.v2.min.js" type="text/javascript"></script> </body> </html>
然后，您可以使用phantomjs server.js和POST d3 = [d3代码呈现到#Viewport]来启动服务器，服务器将以base64编码的png作为响应。
（需要PhantomJS 1.7或更高版本。）