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

矫情吗；* 2022-05-27 03:45 367阅读 0赞

![demo][]

![demo][demo 1]

[在线制作沙雕图][Link 1] [源码][Link 2]

受到[在线生成Sorry动图][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()

[demo]: /images/20220527/790c3ac50d1845d1a61acab502dc5e89.png
[demo 1]: /images/20220527/4dadec3ed756422896498563bdfd4048.png
[Link 1]: https://xfgryujk.github.io/memegen/
[Link 2]: https://github.com/xfgryujk/memegen
[Sorry]: https://sorry.xuty.tk/sorry/
[omggif]: https://github.com/deanm/omggif
[gif.js]: https://github.com/jnordberg/gif.js

发表评论取消回复

表情：

评论列表（有 0 条评论，367人围观）

还没有评论，来说两句吧...

相关阅读

相关制作GIF图像

制作GIF图像在Python中，我们可以使用第三方库来制作GIF（Graphics Interchange Format）图像，使其在一系列图像之间创建动画效果。在本文中，

深藏阁楼爱情的钟/ 2024年03月04日 03:40/ 0 赞/ 96 阅读

相关 danet(弹额头表情包动漫gif)

dragon是什么意思 global dragon Danet is CEO of global design and branding firm dragon rou

柔情只为你懂/ 2023年09月26日 12:43/ 0 赞/ 81 阅读

相关 PhotoshopCC2019制作表情包

1 打开素材（找出自己想要的p的图片，网上搜索空白的表情包） 2 套索工具选中人的脸部，移动到空白的表情包素材中（移动工具） ![在这里插入图片描述][waterm

待我称王封你为后i/ 2023年07月04日 12:46/ 0 赞/ 42 阅读

相关 python 表情包 gif,用 Python 开发一个【GIF表情包制作神器】

用 Python 开发一个【GIF表情包制作神器】小帅b 学习python的正确姿势之前小帅b写过这样一篇教程用python成为了微信斗图届的高手然后，好多人表

我会带着你远行/ 2023年01月17日 03:22/ 0 赞/ 191 阅读

相关 inshot怎么转gif_轻松制作有趣的GIF动画表情，一键3秒搞定

![ef5e8aa28bc47a53ea42639720c3261b.gif][] 经常看到别人的gif 都可以带自己的图片文案 ![5c06036f35fabe77

灰太狼/ 2023年01月02日 01:14/ 0 赞/ 329 阅读

相关 js+svg制作表情评价效果

[下载地址][Link 1] js+svg制作表情评价效果，拖动滑块表情变化打分效果，支持手机端4个表情分段评价。 ![1632290892.png][] dd: [

迈不过友情╰/ 2022年09月13日 00:29/ 0 赞/ 182 阅读

相关前端js实现正则表情包内容替换

表情包实现 > 思路：通过全局正则针对文本内容走查，匹配到\[嘿哈\]文本表情包，通过创建div或者img标签，包裹将文本表情包替换成我们表情包的地址链接。 /

快来打我*/ 2022年09月10日 13:20/ 0 赞/ 276 阅读

相关 gif在线制作

1.现在我们打开软件开始( [http://www.uupoop.com/gif/][http_www.uupoop.com_gif] )gif在线制作，电脑上打开一张照片。

野性酷女/ 2022年08月21日 10:37/ 0 赞/ 274 阅读

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

![demo][] ![demo][demo 1] [在线制作沙雕图][Link 1] [源码][Link 2] 受到[在线生成Sorry动图][Sorry]的启发，也想

矫情吗；*/ 2022年05月27日 03:45/ 0 赞/ 368 阅读

相关 gif图的制作

> 好多博客里面都有炫酷的动图？或者动态的操作、展示图片，这对于提高我们博客的可读性提升无疑是巨大的！那么如何快速简单的制作动图呢？马上告诉你答案！下载git制作工具

「爱情、让人受尽委屈。」/ 2022年01月23日 12:55/ 0 赞/ 335 阅读