# 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](../../api/image-editor/exports/#postprocessimageblob) property on the [createDefaultImageWriter](../../api/image-editor/exports/#createdefaultimagewriter) function to convert images to different formats.
The third-party library [gif.js](https://github.com/jnordberg/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](https://github.com/jnordberg/gif.js) for more information.
* [ JavaScript](#javascript-panel-0)
* [ React](#react-panel-0)
* [ Vue](#vue-panel-0)
* [ Svelte](#svelte-panel-0)
* [ Angular](#angular-panel-0)
* [ jQuery](#jquery-panel-0)
* [index.html](#index-html-panel-0)
```html
```
* [App.jsx](#App-jsx-panel-0)
* [App.css](#App-css-panel-0)
```jsx
import '@pqina/pintura/pintura.css';
import './App.css';
import { useState } from 'react';
import { PinturaEditor } from '@pqina/react-pintura';
import { processImage, getEditorDefaults } from '@pqina/pintura';
const editorDefaults = getEditorDefaults({
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.addFrame(image);
gif.on('finished', (gifBlob) => {
// clean up URL to our output image
URL.revokeObjectURL(blob);
// return the GIF to the editor
resolve(gifBlob);
});
gif.render();
};
// Convert the blob to a URL so we can load it as an image
image.src = URL.createObjectURL(blob);
}),
},
});
function App() {
const [editorResult, setEditorResult] = useState(undefined);
const handleEditorProcess = (imageState) => {
setEditorResult(URL.createObjectURL(imageState.dest));
};
return (
{editorResult &&
}
```
* [App.svelte](#App-svelte-panel-0)
```svelte
{#if editorResult}
{/if}
(
this.domSanitizer.bypassSecurityTrustResourceUrl(
URL.createObjectURL(blob)
)
);
}),
},
});
handleEditorProcess(imageState: any): void {
this.editorResult = (
this.domSanitizer.bypassSecurityTrustResourceUrl(
URL.createObjectURL(imageState.dest)
)
);
}
}
```
```html
```
## Editing Animated GIFs
We can take this a step further to enable editing animated GIFs. When editing animated GIFs we'll have to access each frame of the GIF, apply changes, and then generate a new GIF.
We'll also have to create a custom image processor.
To get the individual frames of the GIF we'll add [omggif.js](https://github.com/deanm/omggif) to our project.
* [ JavaScript](#javascript-panel-1)
* [ React](#react-panel-1)
* [ Vue](#vue-panel-1)
* [ Svelte](#svelte-panel-1)
* [ Angular](#angular-panel-1)
* [ jQuery](#jquery-panel-1)
* [index.html](#index-html-panel-1)
```html
```
* [App.jsx](#App-jsx-panel-1)
* [App.css](#App-css-panel-1)
```jsx
import '@pqina/pintura/pintura.css';
import './App.css';
import { useState } from 'react';
import { PinturaEditor } from '@pqina/react-pintura';
import {
processDefaultImage,
getEditorDefaults,
createDefaultImageWriter,
} from '@pqina/pintura';
const editorDefaults = getEditorDefaults({
imageWriter: [
// our custom imageWriter has only one step,
// read the gif and pass it to the custom processor
[
async (state, options, onprogress) => {
const { src, imageState } = state;
// get all the frame data and info from the animated GIF
const frames = await framesFromGIF(src);
// apply our image transforms to each frame
for (const [index, frame] of frames.entries()) {
const { dest } = await processDefaultImage(frame.canvas, {
imageWriter: createDefaultImageWriter({
format: 'imageData',
}),
imageState,
});
// set frame output image data
frame.imageData = dest;
}
// generate a new animated GIF and set it as output image
state.dest = await gifFromFrames(frames);
return state;
},
'generate-animated-gif',
],
],
});
const framesFromGIF = (blob) => {
return new Promise(async (resolve) => {
const ab = await blob.arrayBuffer();
// use the GifReader supplied by omggif.js to get the frames
const gifReader = new GifReader(new Uint8Array(ab));
const frameCount = gifReader.numFrames();
const frames = [];
for (let i = 0; i < frameCount; i++) {
const currentFrame = gifReader.frameInfo(i);
const image = new ImageData(
currentFrame.width,
currentFrame.height
);
gifReader.decodeAndBlitFrameRGBA(i, image.data);
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = image.width;
canvas.height = image.height;
ctx.putImageData(image, 0, 0);
frames[i] = {
...currentFrame,
canvas,
};
}
resolve(frames);
});
};
const gifFromFrames = (frames) => {
return new Promise(async (resolve) => {
// use GIF supplied by gif.js to create animated gif
const gif = new GIF();
// done
gif.on('finished', resolve);
// add frames
frames.forEach((frame) => {
gif.addFrame(frame.imageData, { delay: frame.delay * 10 });
});
gif.render();
});
};
function App() {
const [editorResult, setEditorResult] = useState(undefined);
const handleEditorProcess = (imageState) => {
setEditorResult(URL.createObjectURL(imageState.dest));
};
return (
{editorResult &&
}
```
* [App.svelte](#App-svelte-panel-1)
```svelte
{#if editorResult}
{/if}
=> {
return new Promise(async (resolve) => {
const ab = await blob.arrayBuffer();
// use the GifReader supplied by omggif.js to get the frames
const gifReader = new GifReader(new Uint8Array(ab));
const frameCount = gifReader.numFrames();
const frames = [];
for (let i = 0; i < frameCount; i++) {
const currentFrame = gifReader.frameInfo(i);
const image = new ImageData(
currentFrame.width,
currentFrame.height
);
gifReader.decodeAndBlitFrameRGBA(i, image.data);
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = image.width;
canvas.height = image.height;
ctx.putImageData(image, 0, 0);
frames[i] = {
...currentFrame,
canvas,
};
}
resolve(frames);
});
};
const gifFromFrames = (frames: any[]): Promise => {
return new Promise(async (resolve) => {
// use GIF supplied by gif.js to create animated gif
const gif = new GIF();
// done
gif.on('finished', resolve);
// add frames
frames.forEach((frame) => {
gif.addFrame(frame.imageData, { delay: frame.delay * 10 });
});
gif.render();
});
};
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
constructor(private domSanitizer: DomSanitizer) {}
editorResult?: string = undefined;
editorDefaults: any = getEditorDefaults({
imageWriter: [
// our custom imageWriter has only one step,
// read the gif and pass it to the custom processor
[
async (state, options, onprogress) => {
const { src, imageState } = state;
// get all the frame data and info from the animated GIF
const frames = await framesFromGIF(src);
// apply our image transforms to each frame
for (const [index, frame] of frames.entries()) {
const { dest } = await processDefaultImage(
frame.canvas,
{
imageWriter: createDefaultImageWriter({
format: 'imageData',
}),
imageState,
}
);
// set frame output image data
frame.imageData = dest;
}
// generate a new animated GIF and set it as output image
state.dest = await gifFromFrames(frames);
return state;
},
'generate-animated-gif',
],
],
});
handleEditorProcess(imageState: any): void {
this.editorResult = (
this.domSanitizer.bypassSecurityTrustResourceUrl(
URL.createObjectURL(imageState.dest)
)
);
}
}
```
```html
```