Перетащите изображения или GIF сюда

Файл не загружается на сервер — всё происходит в браузере.

Кадры

Перетащите изображения или GIF сюда — здесь появятся кадры

GIF готов

Готовый GIF

Как это сделано

Раскадровка работает на @la-moore/gif — TypeScript-библиотеке для чтения и записи GIF в браузере. Палитра подбирается в веб-воркерах, а «назад» и «бумеранг» — это одна опция.

npm i @la-moore/gif
import { GifReader, GifWriter } from '@la-moore/gif'

const reader = new GifReader()
await reader.loadBlob(file)

const gif = new GifWriter({
  width: reader.width,
  height: reader.height,
  playbackMode: 'bounce', // или 'reverse'
})

reader.forEach((frame, i, rgba) => {
  const image = new ImageData(rgba, reader.width, reader.height)
  gif.addFrameImageData(image, { delay: frame.delay * 10 })
})

gif.getBlobGIF((blob) => {
  img.src = URL.createObjectURL(blob)
})