How to load GIF Image using Canvas in NodeJs?

Question

I'm using MacOS for testing it. I have giflib installed on my mac as per the documentation mentioned in Canvas NPM Package .

I'm able to serve Images perfectly with canvas, but I'm unable to serve GIFs to the browser using Canvas. There are no error logs as well.

Here is my code:

   app.get('/media', function(req, res) {

    
    const { createCanvas, loadImage, giflib } = require('canvas')

    const canvas = createCanvas(600, 400)
    const ctx = canvas.getContext('2d')


    const imagePath = loadImage('https://via.placeholder.com/200x200.png')
    const gifPath = loadImage('https://www.hubspot.com/hubfs/Smiling%20Leo%20Perfect%20GIF.gif')

    gifPath.then((image) => { 
        // do something with image

        canvas.toBuffer((err2, buf) => {
            if (err2) {
                console.log("To Buffer Error>>>>>>", err2)
            }
            else
            {
                res.writeHead(200, {'Content-Type': 'image/gif'});
                res.end(buf, 'binary');
            }        

        }, 'image/gif', { quality: 0.95 })
    

    }).catch(err => {
            console.log('oh no!', err)
    })


})

The code works if I use imagePath and mimeType as image/png.

Could someone point me in the right direction?

does this help - maybe a little more work but could work: https://jeremybouny.fr/en/articles/server_side_canvas_node/ — CybeX, Jul 24 '21 at 17:49
I don't use NodeJS so you tell me: Is it not possible in Node to create an `` element and set your GIF as `.src` and have browser display the GIF? If that's possible then you could also create a ` — VC.One, Jul 28 '21 at 17:44

Kemal Kaplan · Answer 1 · 2021-07-19T13:02:51.467

0

I think you cannot handle the animated gif with a single canvas. You should either

create an animated canvas as described in https://stackoverflow.com/a/10180164/11009351 if you want to modify the image

or simply write the image as a byte stream as follows

  const http = require("http");

  const express = require("express");
  const request = require("request");

  const app = express();
  const server = http.createServer(app);
  server.listen(8080);

  app.get("/media", function (req, res) {
    const x = request(
      "https://www.hubspot.com/hubfs/Smiling%20Leo%20Perfect%20GIF.gif"
    );
    x.pipe(res);
  });

edited Jul 19 '21 at 13:02

answered Jul 19 '21 at 12:54

Kemal Kaplan

932
8
21

But I would have to save each frame in temp folder, make modifications & then merge everything together into a gif? Is there a better way? – Anirudh Jul 19 '21 at 14:49
I may recommend you to save and edit the gif with another npm package, then stream by using the second method using fs. You may check https://www.npmjs.com/package/text-on-gif if embedding a text is enough for you. – Kemal Kaplan Jul 19 '21 at 15:01
Not only text, I need to add shapes and Logos as well – Anirudh Jul 20 '21 at 05:53

How to load GIF Image using Canvas in NodeJs?

1 Answers1