在线制作沙雕图 源码
受到在线生成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()
更多推荐
纯JS实现在前端制作GIF表情包的网站
发布评论