Question

所以我想创建一个gif并将图像添加为帧。我正在使用gifencoder。我已经看过这些例子，它很容易添加颜色，txt等，但我无法弄清楚如何对图像做同样的事情。我需要像png文件流这样的东西。

ex：来自网站的彩色框架

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，具体取决于您的代码。我也改变了加载图像的大小，以适应正方形。

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

将图像作为帧添加到gif

2 个答案: