Create Animated GIFs from Images Create animated GIF files from a sequence of images with customizable frame delay.

The tool works by utilizing React's useState and useRef hooks to manage the state of uploaded images and a canvas element. When an image is dropped into the FileDropzone component, it triggers the handleFile function which updates the state with the new image URL and name. The generate function is called when the user clicks the "Create GIF" button, this function loads all the images onto the canvas using the HTMLImageElement and Promise.all to wait for all images to load. It then finds the maximum dimensions of all images, scales them down if necessary to a maximum of 800 pixels for performance, and draws each image onto the canvas at these uniform dimensions.

The canvas context is used to get the image data which is then encoded into a GIF frame using the encodeGif function from the gif-codec library. This function applies LZW compression to the pixel data and writes it in the GIF89a format with a Netscape looping extension for compatibility. The tool uses a custom encoder to quantize colors to 256, ensuring that generated GIFs are compatible with most browsers and devices. Each frame's delay is specified using the graphic control extension, allowing for adjustable frame delays between 20ms and 2000ms.

When all frames have been encoded, the resulting blob is created as a URL object which can be downloaded by the user or displayed in the browser. The tool uses React's useCallback hook to memoize functions like generate and download, preventing unnecessary re-renders and improving performance. It also uses React's useRef hook to create a reference to the canvas element, allowing it to access the canvas context and perform drawing operations on it. The removal of images is handled by revoking the object URL of the image using URL.revokeObjectURL and updating the state with the new list of images.