web-dev-qa-db-ja.com

nodejs-ファイルからキャンバスに画像データを追加する方法

次のコードは、画像ファイルを読み取り、Canvasモジュールを使用してファイルデータをCanvasに追加することを想定しています。

このコードを実行すると、エラーメッセージが表示されます画像が定義されていません。単にインポートしたモジュールから初期化しようとしている画像オブジェクトはありますか？

var http = require('http'), fs = require('fs'), 
Canvas = require('canvas');

http.createServer(function (req, res) {
    fs.readFile(__dirname + '/image.jpg', function(err, data) {
        if (err) throw err;
        img = new Image();
        img.src = data;
        ctx.drawImage(img, 0, 0, img.width / 4, img.height / 4);

        res.write('<html><body>');
        res.write('<img src="' + canvas.toDataURL() + '" />');
        res.write('</body></html>');
        res.end();
    });

}).listen(8124, "127.0.0.1");
console.log('Server running at http://127.0.0.1:8124/');
imagenode.jscanvashtml5-canvas
15
mesh

ここで間違っていることをお詫びしますが、このコードをどこかで見つけて、実際に何が起こっているのかを理解せずに使用しようとしたようです。 画像が定義されていませんエラーを修正したとしても、他にもたくさんあります。

この投稿の最後に修正されたコードがありますが、質問のコードでこれらの問題についてより深く考えることをお勧めします。

  • Imageとは何ですか？それはどこから来たのですか？ http、fs、およびCanvasをインポートしたので、これらは明らかに定義されています。ただし、Imageはどこにも定義されておらず、組み込みではありません。

    実は、Imageは、Canvas = require('canvas')でインポートしたnode-canvasモジュールからのものです。これは、Imageが_Canvas.Image_として利用できることを意味します。

    これは、設定したインポートが原因であることを理解することが重要です。 abc = require('canvas')を簡単に実行できれば、Imageは_abc.Image_として使用できます。

  • ctxとは何ですか？それはどこから来たのですか？

    繰り返しますが、これはどこにも定義されていない別の変数です。 Imageとは異なり、_Canvas.ctx_としては利用できません。これは、現時点では何にも対応していない単なる確率変数名であるため、その上でdrawImageを呼び出そうとすると、例外がスローされます。

  • canvas（小文字）はどうですか？それは何ですか？

    _canvas.toDataURL_を使用していますが、canvasという変数はどこにもありません。このコードが何をすることを期待していますか？今のところ、canvasが未定義であるという例外をスローします。

ドキュメントをより詳しく読み、将来、独自のアプリケーションにコピーするサンプルコードをより詳しく調べることをお勧めします。

これが修正されたコードで、私の変更を説明するコメントがいくつかあります。 https://github.com/learnboost/node-canvas のドキュメントをざっと見て、これを理解しました。

_var http = require('http'), fs = require('fs'), 
Canvas = require('canvas');

http.createServer(function (req, res) {
    fs.readFile(__dirname + '/image.jpg', function(err, data) {
        if (err) throw err;
        var img = new Canvas.Image; // Create a new Image
        img.src = data;

        // Initialiaze a new Canvas with the same dimensions
        // as the image, and get a 2D drawing context for it.
        var canvas = new Canvas(img.width, img.height);
        var ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0, img.width / 4, img.height / 4);

        res.write('<html><body>');
        res.write('<img src="' + canvas.toDataURL() + '" />');
        res.write('</body></html>');
        res.end();
    });

}).listen(8124, "127.0.0.1");
console.log('Server running at http://127.0.0.1:8124/');
_
40
Rohan Singh