纯JS实现在前端制作GIF表情包的网站

在线制作沙雕图 源码

受到在线生成Sorry动图的启发，也想做一个表情包制作网站。不过这个网站是在后端生成GIF，我觉得这种小程序直接在前端实现就好了，找了一下还真有制作GIF的JS库：omggif和gif.js。

解码模板GIF用omggif：

import omggif from 'omggif'

// response由XHR请求GIF图片得到
gifReader = new omggif.GifReader(new Uint8Array(response.data))
let frame0Info = gifReader.frameInfo(0)
let [width, height] = [frame0Info.width, frame0Info.height]

// 图片数据缓冲，格式是RGBA RGBA ...
let pixelBuffer = new Uint8ClampedArray(width * height * 4)
// iFrame为帧索引
gifReader.decodeAndBlitFrameRGBA(iFrame, pixelBuffer)

因为omggif的编码API太烂了，这里是用Canvas处理完图像数据后再用gif.js编码成GIF：

import GIF from 'gif.js'

let gif = new GIF({
  workers: 2,
  quality: 10,
  width: width,
  height: height
})
// 循环调用加入所有帧，ctx是Canvas的ctx
gif.addFrame(ctx, {
  copy: true,
  delay: frameInfo.delay * 10,
  dispose: frameInfo.disposal
})
gif.on('finished', blob => {
  // 这里blob就是GIF图片数据了
})
gif.render()