2e:null 2f:["$","title",null,{"children":"Gif Encoder 2 | BVG Software | Observable"}] 34:T4c5,md`# Gif Encoder 2 Everyone loves a good GIF. A little while ago I found [@tmcw/octree-color-quantization](https://observablehq.com/@tmcw/octree-color-quantization) which shares a JavaScript implementation of the Octree algorithm for [image quantization](https://en.wikipedia.org/wiki/Quantization_(image_processing). The existing GIF encoder only offered the NeuQuant algorithm so I created a fork and tweaked around until I had a new library that could use both algs. I also added an optional optimizer since encoding multiple large images was taking too long and producing large output files. While both issues still exist, using the optimizer can be helpful if many of the images are similar.

Clearly, this demo is somewhat limitted by the browser. The issue is capturing sequential images of the same size to input in the first place. Checkout [GifIt](https://github.com/benjaminadk/gifit), a desktop application created with JavaScript that can create GIFs from desktop/webcam/whiteboard. `35:[] 32:{"id":"b0e3983b401af409","slug":"gif-encoder-2","title":"Gif Encoder 2","thumbnail":"39cc691499ac13a21668899f1ef901d1b402ca161fc00d925a2be5e96bbb6830","access_level":"public","create_time":"$D2019-07-01T10:21:27.392Z","update_time":"$D2019-08-25T00:39:02.735Z","view_time":null,"first_public_time":"$D2019-07-01T15:30:34.359Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"15d67834e9550a94","login":"benjaminadk","name":"BVG Software","avatar_url":"https://avatars-next.observableusercontent.com/00f61cf4ffb4901e0316348b1262a81863dacaa4831453bc98610474edd94c4f","tier":"starter_2024"},"version":321,"publish_version":321,"role":null,"authored":false,"authors":[{"type":"individual","id":"cfd943db52d00c02","login":"benjaminadk","name":"BVG Software","avatar_url":"https://avatars-next.observableusercontent.com/00f61cf4ffb4901e0316348b1262a81863dacaa4831453bc98610474edd94c4f","tier":null}],"members":[{"type":"individual","id":"cfd943db52d00c02","login":"benjaminadk","name":"BVG Software","avatar_url":"https://avatars-next.observableusercontent.com/00f61cf4ffb4901e0316348b1262a81863dacaa4831453bc98610474edd94c4f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Gif Encoder 2","cells":[{"id":0,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"viewof algorithm = radio({\n title: 'Algorithm',\n description: 'Determines how images colors are reduced to a color palette.',\n options: [\n {label: 'NeuQuant', value: 'neuquant'},\n {label: 'Octree', value: 'octree'}\n ],\n value: 'neuquant'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"viewof optimize = checkbox({\n title: 'Optimization',\n options: [{label: 'Use Optimizer', value: 'yes'}],\n value: 'yes'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"viewof delay = slider({\n min: 10,\n max: 5000,\n step: 10,\n value: 100,\n title: 'Delay',\n description: 'Delay in milliseconds between frames.'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"viewof images = file({\n title: \"Images\",\n description: \"For best results use images of the same dimensions and set browser zoom to 100%.\",\n accept: [\".jpg\",'.png','.svg'],\n multiple: true,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"draw()[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"draw()[1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"css`\nbody {\n font-family: Arial, san-serif;\n user-select: none;\n}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"function draw() {\n if(!data.length) {\n return [md`Set your browser zoom to 100%`, md`Proceed with caution!` ]\n } else {\n var width = data[0].width \n var height = data[0].height\n var ctx = DOM.context2d(width, height)\n var encoder = new GifEncoder(width, height, algorithm, optimize)\n encoder.start()\n encoder.setDelay(delay)\n data.forEach(el => {\n ctx.putImageData(el.data, 0, 0)\n encoder.addFrame(ctx)\n })\n encoder.finish()\n var buffer = encoder.out.getData()\n var blob = new Blob([buffer], {type: 'image/gif'})\n return [DOM.download(blob, 'wow.gif', 'Download GIF'), html`

`]\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"data = Promise.all((Array.from(images).map(image => loadImage(URL.createObjectURL(image)))))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"css = (...args) => {\n const style = interpolate(...args)\n return html`\n

CSS

\n${md`\n~~~css\n${style}\n~~~\n`}\n

\n\n\n `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"interpolate = (strings, ...interpolations) => {\n let s = ''\n for (let i = 0; i < strings.length; i++) {\n s += strings[i]\n if (i < interpolations.length) {\n s += String(interpolations[i])\n }\n }\n return s\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"GifEncoder = require('https://bundle.run/gif-encoder-2@1.0.3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"import {loadImage} from '@tmcw/raster-image-utilities'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"import {radio, checkbox, slider, file} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"