将图像作为帧添加到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之前,png/gif这个模块不能添加这样的框架,如果你有另一个想法,那么请继续这样说.

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所取得的进展(我注意到模块接受rgba格式,而不是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 中，旁边是一个蓝色方块。

这是完整的代码，经过测试并且对我来说工作正常：

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

请注意，我readFileSync这次使用的是 readFile，但您也可以像我的其他答案一样使用 readFile，具体取决于您的代码。我还更改了加载图像的大小以适合正方形。