将图像作为框架添加到 gif

Question

所以我想创建一个 gif 并将图像添加为框架。我正在使用吉芬编码器。我已经看过示例，添加颜色、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

您可以使用 fs.readFile:

将图像加载到 canvas

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

Answer 2

我已将图像作为框架添加到 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，具体取决于您的代码。我还更改了加载图像的大小，以适合正方形。

将图像作为框架添加到 gif

Add image as frame to a gif

image

gif

node.js

node-canvas