我想创建一个gif并添加一张图片作为帧。我正在使用gifencoder。我已经看过了示例,添加颜色、文本等非常容易,但我无法弄清如何添加图像。我需要像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.
}
});