6

ということでgifを作成して画像をフレームとして追加したいと思います。私はgifencoderを使用しています。例を見て、色やtxtなどを簡単に追加できることを確認しましたが、画像で同じことを行う方法がわかりませんでした。png ファイル ストリームのようなものが必要ですか。

例:カラーフレームのサイトより

let canvas = new Canvas(width, height);
var ctx = canvas.getContext('2d');
red rectangle
ctx.fillStyle = '#ff0000';
ctx.fillRect(0, 0, 320, 240);
encoder.addFrame(ctx);

編集:

以下のようなことを試してみましたが、必要に応じてフレームがログに表示されますが、フレームが追加されず、エラーはありません。誰かが png/gif を base64 に変換することを提案する前に、このモジュールはそのようなフレームを追加できません。

fs.createReadStream('test.gif')
.pipe(new GIFDecoder) //gif-stream
.pipe(concat(function(frames) { //concat-frames
    console.log(frames);
    for (var i=0; i<frames.length; i++) {
        encoder.addFrame(frames[i]);
    }
}));

せいぜい何を試しても、黒いgifしか得られず、それ以上のものはありません。

編集2:

さて、私がgifからフレームを追加しようとしている理由は、単純に簡単に思えたからです。以下は、画像を取得し、RGBA に変換しようとして行った進行状況です (モジュールが rgb ではなく rgba 形式を受け入れることに気付きました。おそらくそれが常に黒だった理由です)。その後、フレームを追加します。メソッドを呼び出してデータをプッシュするだけなので、データがある場合にフレームを追加するのは非常に簡単なので、省略します。

var request = require('request').defaults({ encoding: null });

request.get('https://upload.wikimedia.org/wikipedia/commons/0/01/Quinlingpandabearr.jpg', function (error, response, body) {
    if (!error && response.statusCode == 200) {
        var img = new Canvas(105, 159);        
        var context = img.getContext('2d');
        img.src = "data:" + response.headers["content-type"] + ";base64," + new Buffer(body).toString('base64');
        var img_to_rgba = context.getImageData(0, 0, img.width, img.height);
        console.log(img_to_rgba); //always returns 0, like my pic is completely black, its not.
    }
});
4

2 に答える 2