gifにフレームとして画像を追加

Question

だから、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); 

カラーフレームのためのウェブサイトから：

私は以下のようなものをやってみましたし、フレームが追加されますいけないたかったようフレームは、私のログにエラーが表示されない間。誰かが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]); 
    } 
})); 

私が試したことは何でも、それ以上のものはありません。

編集2：それは単に容易に見えたので、私はGIFからのフレームを追加しようとしていた理由があったので

わかりました。以下は、私が画像を取得しようとして行った進捗状況をRGBAに変換することです（モジュールはrgb形式ではなくrgb形式を受け入れることに気付きました。おそらくそれが常に黒だったからです）。メソッドを呼び出してデータをプッシュするだけで、データがある場合はフレームを追加するのが非常に簡単です。そのため、残しておきます。

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

Answer 1

私が側に沿ってGIFにフレーム、青い四角などの画像を追加しました。ここで

完全なコード、テストされ、私のために正常に動作している：私はreadFileSyncにこの時間を使っていますが、あなたはあなたのコードに応じて、あまりにも私の他の答えのようにreadFileのを使用することができます

var GIFEncoder = require('gifencoder'); 
var Canvas = require('canvas'); 
var fs = require('fs'); 

var encoder = new GIFEncoder(320, 240); 

encoder.createReadStream().pipe(fs.createWriteStream('myanimated.gif')); 

encoder.start(); 
encoder.setRepeat(0); 
encoder.setDelay(500); 
encoder.setQuality(10); 

var canvas = new Canvas(320, 240); 
var ctx = canvas.getContext('2d'); 

// blue rectangle frame 
ctx.fillStyle = '#0000ff'; 
ctx.fillRect(0, 0, 320, 240); 
encoder.addFrame(ctx); 

// image frame 
var data = fs.readFileSync(__dirname + '/image.jpg'); 
var img = new Canvas.Image; 
img.src = data; 
ctx.drawImage(img, 0, 0, 320, 240); 
encoder.addFrame(ctx); 

encoder.finish(); 

注意。 私は四角に合うように、読み込まれたイメージのサイズも変更しました。

Answer 2

あなたはfs.readFileでキャンバスに画像をロードすることができます。

fs.readFile(__dirname + '/image.jpg', function(err, data) { 
    if (err) throw err; 
    var img = new canvas.Image; 
    img.src = data; 
    ctx.drawImage(img, 0, 0, img.width, img.height); 
})