DEV Community

Simon László
Simon László

Posted on

How to use gif.js from CDN

If you want to use the GIF.js library from a CDN in your web project, you can follow these steps:

Step 1: Add the GIF.js library to your project.

Add the following code to the head section of your HTML file.

<script src="https://cdn.jsdelivr.net/npm/gif.js@0.2.0/dist/gif.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

Alternatively, you can use ES6 import syntax to import the library.

import 'https://cdn.jsdelivr.net/npm/gif.js@0.2.0/dist/gif.min.js';
Enter fullscreen mode Exit fullscreen mode

Step 2: Set up a GIF instance.

Get the container element that will hold your visualizations.

let container = document.getElementById("my-container");
Enter fullscreen mode Exit fullscreen mode

Now we need to fetch the worker script from the CDN because modern web browsers have security restrictions that require the worker script to be loaded from the same origin as the web page. So, we fetch the worker script and use URL.createObjectURL to create a Blob URL, which ensures that the worker script
is loaded from the same origin as the web page.

let gifLoading = fetch('https://cdn.jsdelivr.net/npm/gif.js@0.2.0/dist/gif.worker.js')
  .then((response) => {
    if (!response.ok)
      throw new Error("Network response was not OK");
    return response.blob();
  })
Enter fullscreen mode Exit fullscreen mode

Create a new instance of GIF and configure it.

  .then(workerBlob => {
    let gif = new GIF({
      workers: 4,
      workerScript: URL.createObjectURL(workerBlob),
      quality: 10,
      width: container.clientWidth,
      height: container.clientHeight
    });
Enter fullscreen mode Exit fullscreen mode

Set up the 'finished' event listener for the GIF.js instance. This will open the GIF in a new tab when the GIF is completed.

    gif.on('finished', function(blob) {
      window.open(URL.createObjectURL(blob));
    });

    return gif;
  });
Enter fullscreen mode Exit fullscreen mode

Step 3: Use the GIF.js instance.

Now you can use the GIF.js instance to create your GIF. First, add your visualizations to the container element and call the addFrame method for each frame.

gifLoading.then(gif => {

  // Add visualization frames to the container element
  // ...

  // Add frames to GIF
  gif.addFrame(container, { delay: 100 });

  // Repeat ...

  // Call the `render` method to generate the GIF
  gif.render();
});
Enter fullscreen mode Exit fullscreen mode

That's it! You can now use GIF.js to create animated GIFs from your visualizations.

Top comments (0)