Saving the output image as a GIF

Browsers can load GIF images to the canvas but cannot output GIF images.

To work around this browser limiation we can use the postprocessImageBlob property on the createDefaultImageWriter function to convert images to different formats.

The third-party library gif.js can convert JPEGs and PNGs to GIFs, we'll use it in the postprocessImageBlob hook.

In the example below gif.js needs to be added using a script tag, see the gif.js documentation for more information.

<!DOCTYPE html>

<link rel="stylesheet" href="./pintura.css" />

<img src="" alt="" />

    .pintura-editor {
        height: 600px;

<div id="editor"></div>

<script type="module">
    import { appendDefaultEditor, processImage } from './pintura.js';

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        imageWriter: {
            postprocessImageBlob: ({ blob }) =>
                new Promise((resolve) => {
                    // Load the output blob as an image so we can load it with gif.js
                    const image = new Image();
                    image.onload = () => {
                        // The image has loaded, let's create a GIF
                        const gif = new GIF();
                        gif.on('finished', (gifBlob) => {
                            // clean up URL to our output image

                            // return the GIF to the editor

                    // Convert the blob to a URL so we can load it as an image
                    image.src = URL.createObjectURL(blob);

    editor.on('process', (imageState) => {
        document.querySelector('img').src = URL.createObjectURL(