Add frame image to gif

Question

So, I want to create a gif and add the image as a frame. I am using gifencoder. I saw examples and it’s pretty easy to add colors, txt, etc., but I couldn’t figure out how to do the same with the image. I need something like a stream of png files.

ex: from website for color frame

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

Edit:

I tried to do something like below, and while the frames appear in my journal, as I would like, the frames are not added, no errors. Before someone suggests converting a png / gif file to base64, this module cannot add such frames that, if you have another question, please continue and say this.

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

no matter what I try at best, I get only a black gif, nothing more.

Edit 2:

Okay, so the reason I am trying to add frames from the gif was because it just seemed easier. Below I tried to get the image, converted it to RGBA (I noticed that the module accepts the rgba format, not rgb, which is probably why it was always black), and then adds the frame. Adding a frame, if I have data, is very simple, because I just call the method and insert the data, so I am going to leave this.

 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

I added a frame image to the gif, along the blue square.

Here is the complete code tested and working for me:

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

Please note that I am using readFileSync this time, but you can also use readFile, as in my other answer, depending on your code. I also resize the uploaded image to fit the square.

Answer 2

You can upload an image to the canvas using 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); })