Я использую node.js для сохранения холста к изображению img в writeFile извлекается с помощью toDataURL на моем элементе canvas. сохранить файл doenot вот мой код
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.'
});
}
});
Вот буквальный пример как сохранить данные холста в файл в Nodejs. Переменная img
- это строка, сгенерированная canvas.toDataURL()
. Я предположил, что вы уже знаете, как установить POST эту строку из браузера на ваш сервер 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);
Вывод:
Buffer
, я просто пытался использовать base64.decode()
с данными base64, но сгенерировал поврежденный файл.
Я считаю, что Canvas
не хранит данные в Base64 внутренне. Он должен хранить данные в более эффективном двоичном формате. Таким образом, очевидно, что перенос на base64 и обратно в двоичный PNG ужасно медленный и потребляющий память.
Быстрый поисковый запрос в node документация на холст дает:
Чтобы создать PNGStream, просто вызовите canvas.pngStream(), и поток начнет выдавать события данных, наконец, испустив конец, когда закончите. Если возникает исключение, происходит событие ошибки.
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');
});
В настоящее время поддерживается только синхронизация. Если вы хотите сделать это асинхронно, вы можете попробовать использовать рабочий или кластер (я лично никогда не пробовал это).