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 的进度（我注意到模块接受 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.
    }
});
4

2 回答 2

3

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

于 2017-03-31T18:28:56.190 回答
-3

您可以使用以下命令将图像加载到画布上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);
})
于 2017-03-23T12:15:51.237 回答