文档章节

纯web前端生成GIF表情

liyoungs
 liyoungs
发布于 01/17 16:18
字数 436
阅读 68
收藏 0

参考 纯前端实现可传图可字幕台词定制的GIF表情生成器 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>gif js</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <script src="gifjs/gif.js"></script>
</head>
<body>
<button type="button" class="btn">生成 GIF</button>
<img class="result-gif" width="437" height="195" src="" alt="">
<script type="text/javascript">
// result-gif btn "images/1.jpg"
let imgSore = {num: 0};
let imgNum = 0;
const srcRoot = "images/";
const w = 437;
const h = 195;
const delay = 1200;

function initImg(len) {
  return new Promise(resolve => {
    let image = new Image();
    image.onload = image.onerror = () => {
      resolve(image);
    };
    image.src = "money/" + len + ".jpg";
  })
}

function createImg(len) {
  let STORE = [];
  for (let i = 1; i <= len; i++) {
    STORE.push(initImg(i));
  }
  return STORE;
}

function init() {
  let i = imgNum + 1;
  // for (let i = 1; i < 4; i++) {
  let img = new Image();
  img.onload = img.onerror = () => {
    // console.log(img);
    console.log(img.width);
    // console.log(event.path.length);
    // imgSore.num++;
    if (imgNum < 10) {
      imgSore.push(img);
      // init();
    }
  };
  img.src = srcRoot + i + ".jpg";
  imgNum++;
  // }
}

function createGif() {
  let IMG_ARR = createImg(10);
  let gif = new GIF({
                      width: w,
                      height: h,
                      workers: 2,
                      quality: 10,
                      workerScript: 'gifjs/gif.worker.js'
                    });
  // 画布元素
  let canvas = document.createElement('canvas');
  const msg = [
        "好啊",
        "就算你是一流工程师",
        "就算你出报告再完美",
        "我叫你改报告你就要改",
        "毕竟我是客户",
        "客户了不起啊",
        "Sorry 客户真的了不起",
        "",
        "以后叫他天天改报告",
        "天天改 天天改",
      ]
  ;
  canvas.width = w;
  canvas.height = h;
  let context = canvas.getContext('2d');
  Promise.all(IMG_ARR).then(value => {
    // console.log(value);
    value.forEach((value1, index) => {
      // // 绘制图片 imgSore
      context.clearRect(0, 0, w, h);
      context.drawImage(value1, 0, 0);
// // // 绘制文字
      context.fillStyle = "#fff";
//     console.log(context);
      if (msg[index]) {
        context.fillText(msg[index], w / 2, h - 20);
      }
// // 作为帧插入GIF
      gif.addFrame(context, {
        delay: delay,
        copy: true
      });
    });
    gif.on('finished', function (blob) {
      // 这里的blob就是gif图片blod格式信息
      console.log(blob);
      // window.open(URL.createObjectURL(blob));
      document.querySelector(".result-gif").src = URL.createObjectURL(blob);
    });
    gif.render();
  });
}

document.querySelector(".btn").addEventListener("click", () => {
  // alert("msg");
  createGif();
});


</script>
</body>
</html>

 

© 著作权归作者所有

liyoungs

liyoungs

粉丝 1
博文 39
码字总数 8165
作品 0
郑州
前端工程师
私信 提问
加载中

评论(0)

斗图神器--纯前端实现视频转GIF制作表情包(已开源)

在线体验 coldday.github.io/mp4ToGif/ Chrome浏览器插件安装点这里 点这安装 背景 上面这张图大家都见过吧,哈哈 现在聊天时候少不了斗图,光发静图逼格略低了些,GIF在斗图中肯定略胜一筹,...

杨金凯
2019/01/07
0
0
session204 imessageApp sticker part I要点

session204 imessageApp sticker partI 工程文件: https://developer.apple.com/library/prerelease/content/samplecode/IceCreamBuilder 工程文件: https://github.com/urmyfaith/wwdc201......

淅沥枫
2016/06/15
0
0
斗图神器推荐,助你纵横“图场”

前言 现在没几个表情包都不好意思和人家聊天了,那么除了收集其他人发出来的和网络上遇见的表情包外,我们还可以从哪里获得有趣的表情呢? 下面就分享几个斗图黑科技工具给大家,助大家在斗图...

己立
2018/04/27
0
0
Golang + Swift 5,我们想认真做一款好的表情包工具

个人是表情包的重度使用者,经常喜欢恶搞身边的朋友,做一些好玩的表情包。 但是对手边的一些工具都不太满意。 编辑 GIF、GIF 倒放一类的功能用过 ImgPlay,功能强大而复杂,但有时候太复杂了...

KyXu
2019/03/29
0
0
动态 Web 校验码图片生成--XVcode

XVcode,Web 动态验证码图片生成工具,用于生成随机验证码图片及返回验证码。以随机圆圈为干扰背景,增加随机前后景透明度,并提供3种gif动态图。 PngGenerator : GifGenerator: Gif2Generat...

PoRui
2016/10/18
7.5K
4

没有更多内容

加载失败,请刷新页面

加载更多

为容器设置启动时要执行的命令及其入参

本页将展示如何为 Pod 中的容器设置启动时要执行的命令及其入参。 准备开始 创建 Pod 时设置命令及入参 使用环境变量来设置入参 通过 shell 来执行命令 注意 接下来 准备开始 你必须拥有一个...

xiaomin0322
25分钟前
24
0
自动化部署工具syncd

一.部署安装 (一)常用安装方式 1. curl https://syncd.cc/install.sh | bash 2. dockerfile安装方式正在测试中 (二)安装参考文档 1.https://syncd.cc/docs/#/install 2.https://github....

浮世清欢-千帆
30分钟前
30
0
如何学习嵌入式?(网上汇总)

如何学习嵌入式?汇总了网上的一些帖子,最后部分给出了一些资源的下载链接 嵌入式菜鸟学习路线,2019, https://zhuanlan.zhihu.com/p/68227075 嵌入式小白到大神学习全攻略(学习路线+课程...

sentuate
31分钟前
23
0
工欲善其事,必先利其器——DevOps中如何管理工具包

一、背景 作为DevOps交付流水线的开发者,为支持CI/CD中各项任务的自动化,都需要依赖多种包管理工具来下载各种相关的工具,比如针对产生最终交付件的构建过程,就需要在构建流程的第一步,自...

JFrog杰蛙
31分钟前
22
0
深度探索JFR - JFR详细介绍与生产问题定位落地 - 2. 通过一个线上调优例子了解JMC 与 Event 结构与详细配置

查看 JFR 事件的工具 - JMC (Java Mission Control) 官网地址:https://adoptopenjdk.net/jmc.html 国内下载起来比较慢,建议在aws上面建一个欧洲法兰克福的实例,在这个实例上先下载好,然...

zhxhash
33分钟前
26
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部