如何将canvas数据保存到文件

我正在使用node.js将canvas保存为图像img writeFile通过在我的canvas元素上使用toDataURL进行提取。 它不保存文件这里是我的代码

var fs = IMPORTS.require('fs'); var path = IMPORTS.require('path'); path.exists('images/', function(exists){ if (exists) { fs.writeFile('images/icon.png', img, function(err){ if (err) callback({ error: false, reply: err }); console.log('Resized and saved in'); callback({ error: false, reply: 'success.' }); }); } else { callback({ error: true, reply: 'File did not exist.' }); } }); 

Answer 1

以下是如何将canvas数据保存到 Nodejs中的文件的文字示例。 variablesimg是由canvas.toDataURL()生成的string。 我假定你已经知道如何将这个string从浏览器发布到你的Nodejs服务器。

生成我使用的示例图像的HTML代码片段：

 <canvas id="foo" width="20px" height="20px"></canvas> <script> var ctx = $('#foo')[0].getContext('2d'); for (var x = 0; x < 20; x += 10) { for (var y = 0; y < 20; y += 10) { if (x == y) { ctx.fillStyle = '#000000'; } else { ctx.fillStyle = '#8888aa'; } ctx.fillRect(x, y, 10, 10); } } console.log($('#foo')[0].toDataURL()); </script> 

Nodejs片段来解码base64数据并保存图像：

 fs = require('fs'); sys = require('sys'); // string generated by canvas.toDataURL() var img = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0" + "NAAAAKElEQVQ4jWNgYGD4Twzu6FhFFGYYNXDUwGFpIAk2E4dHDRw1cDgaCAASFOffhEIO" + "3gAAAABJRU5ErkJggg=="; // strip off the data: url prefix to get just the base64-encoded bytes var data = img.replace(/^data:image\/\w+;base64,/, ""); var buf = new Buffer(data, 'base64'); fs.writeFile('image.png', buf); 

输出：

Answer 2

我相信Canvas不会在Base64内部存储它的数据。 它应该以更高效的二进制格式存储数据。 所以，显然，转换到base64并返回到二进制PNG是非常缓慢和内存消耗。

快速search到节点canvas文档给出：

要创build一个PNGStream，只需调用canvas.pngStream（），stream将开始发射数据事件，最终在完成时发射结束。 如果发生exception，则发出错误事件。

 var fs = require('fs') , out = fs.createWriteStream(__dirname + '/text.png') , stream = canvas.pngStream(); stream.on('data', function(chunk){ out.write(chunk); }); stream.on('end', function(){ console.log('saved png'); }); 

目前只支持同步串stream。 如果你想做asynchronous，你可以尝试使用一个工人或集群（我个人从未尝试过）。