web-dev-qa-db-ja.com

キャンバスデータをファイルに保存する方法

私はnode.jsを使用してcanvasを画像に保存しています。writeFileのimgは、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.'
        });
    }
 });
javascripthtmlnode.js
37
sw-dev

Nodejsでのキャンバスデータをファイルに保存する方法のリテラル例を次に示します。変数imgは、canvas.toDataURL()によって生成される文字列です。私はあなたがすでにブラウザからNodejsサーバーへの文字列POSTその文字列を知っていると思います。

私が使用したサンプル画像を生成する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>

Base64データをデコードして画像を保存するNodejsスニペット：

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

出力：

enter image description here

45
samplebias

CanvasはそのデータをBase64に内部的に保存しないと思います。データをより効率的なバイナリ形式で保存する必要があります。したがって、明らかに、base64への転送とバイナリPNGへの転送は、非常に遅く、メモリを消費します。

ノードキャンバスのドキュメント にすばやくグーグルすると、次のようになります。

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

現在、同期ストリーミングのみがサポートされています。非同期にしたい場合は、ワーカーまたはクラスターを使用してみることができます（私は個人的にこれを試したことはありません）。

20
Dan