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>

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

Step 2: Set up a GIF instance.

Get the container element that will hold your visualizations.

let container = document.getElementById("my-container");

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

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

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

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

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