javascript - cómo guardar datos de lienzo en un archivo

html5 node.js

Question

Estoy utilizando node.js para guardar canvas en image img en writeFile se extrae usando toDataURL en mi elemento canvas. no guarde el archivo aquí es mi código

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

Aquí hay un ejemplo literal de cómo guardar datos de lienzo en un archivo en Nodejs. La variable img es una cadena generada por canvas.toDataURL() . Supuse que ya sabes cómo POSTAR esa cadena del navegador a tu servidor Nodejs.

Fragmento de HTML que genera la imagen de muestra que utilicé:

<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>

Fragmento de Nodejs para decodificar los datos de base64 y guardar la imagen:

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);

Salida:

Answer 2

Creo que Canvas no almacena sus datos en Base64 internamente. Debe almacenar datos en un formato binario mucho más eficiente. Entonces, obviamente, la transferencia a base64 y de vuelta a PNG binario es terriblemente lenta y consume mucha memoria.

La rápida búsqueda en google de la documentación del lienzo del nodo da:

Para crear un PNGStream simplemente llame a canvas.pngStream (), y la transmisión comenzará a emitir eventos de datos, y finalmente emitirá un final cuando termine. Si ocurre una excepción, se emite el evento de error.

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'');
});

Actualmente, solo se admite la sincronización de transmisión. Si desea hacerlo de manera asincrónica, puede intentar usar un trabajador o clúster (yo personalmente nunca lo intenté).