简单三步做出微信h5表情包

在聊天中,表情占据了越来越重要的地位。它能够承载一些难以言说的情感,也让聊天显得更加生动活泼 。

项目实现:

选取mp4文件或摄像头录制生成微信GIF表情,可添加文字和特效(制作中)等功能。

流程图:

使用的工具: 

GIF编码:

https://jnordberg.github.io/gif.js/

只使用核心:GIFEncoder.js

Worker线程:

详见推送《JavaScript Worker 另类玩法

线程编码每个Frame,然后合并成GIF

文件选取、录像:

兼容IOS,安卓平台

var input_file = document.createElement("input");
    input_file.type = "file";
    input_file.multiple = false; //单选文件
    input_file.accept = "video/*";
    input_file.style.display = "none";    document.body.appendChild(input_file);
.....
input_file.onclick();//选择文件

数据采集:

选取文件:android和ios平台选取文件基本上一致。

录像兼容性:在video标签播放能正常识别正确的rotatio。

在Canvas上, 录像不管是横竖屏取得的视频文件roation已经旋转了90度,draw到canvas后

解决方案:

MediaInfo: https://github.com/buzz/mediainfo.js

只能读取视频的mediainfo信息,判断正确的roation

文件大小:7.1M,缺点js文件过大。

判断像素

判断右下角最后的像素是否有值和透明,如果无值和透明,证明视频rotation 90

let checkVideo= video=>{        var temp = tempCanvas        var scale = 320/video.videoHeight
        temp.width = scale *video.videoWidth;
        temp.height = scale * video.videoHeight;        var ctx = tempCanvas.getContext('2d');
        ctx.clearRect(0,0,temp.width,temp.height);
        ctx.drawImage(video,0,0,tempCanvas.width,tempCanvas.height);        var imgData=ctx.getImageData(0,0,tempCanvas.width,tempCanvas.height);        var len = imgData.data.length        if (imgData.data[len-4] ==0&&
            imgData.data[len-3] ==0 &&
            imgData.data[len-2]== 0 &&
            imgData.data[len-1] == 0)
      { 
        return true
      }else {        return false;
        }
  
}

mp4文件解析版:只支持mp4 mov 格式

旋转视频:

let drawRotatedImage = (ctx,image, x, y, angle,scaleX,scaleY)=> { 
    ctx.save();     
    ctx.scale(scaleX,scaleY);       
    ctx.translate(x, y);
    ctx.rotate(angle );
    ctx.drawImage(image, -(image.width/2), -(image.height/2));
    ctx.restore(); 
}

Encoder:

采集长度:4秒

采集间隔:150毫秒

尺寸大小:采集高宽适应在300*300

GIF编码参数:默认

设备

线程

总数

耗时(毫秒)

Frame耗时(毫秒)

Iphone X

1

27

3566

132.07

Iphone X

3

27

1577

58.41

微信对GIF的大小限制

  • 当 GIF 小于 1 MB 时,发出去的动图会自动播放;
  • 当 GIF大于1 MB 小于 5MB 时,发出去的动图需要点击按钮才能播放
  • 开新窗口,体验与小视频一致(Android 目前版本仍需要在新窗口下载后再查看);
  • 当 GIF 大于 5MB 时,微信会提示 GIF 图片过大,无法发送(添加)。

DEMO:


原文作者:腾讯IEG事业群\创意设计部\多媒体开发组员工——林雨

原文发布于微信公众号 - 腾讯NEXT学位(NextDegree)

原文发表时间:2018-07-05

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏向治洪

客户端WebP 图片格式优化

前言 在移动端,图片一直是流量大头,一些商品列表和详情等页面,图片大小动不动就以几百K,当然在某些比较大的公司会根据具体情况去加载相应尺寸的图片,这就意味着服务...

32290
来自专栏数据小魔方

R语言可视化——REmap动态地图

今天开始,要跟着大家学习一个新的可视化R包——REmap包。 说起来,这个包要归功于百度的可视化开源项目——echarts,它是国内为数不多的高水平开源可视化j...

82460
来自专栏编程微刊

Highcharts使用的一些总结

Highcharts 是一个用纯 JavaScript 编写的一个图表库, 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表,并且免费提...

9710
来自专栏小白课代表

图像浏览器 —— Honeyview

https://dl.bandisoft.com/honeyview/HONEYVIEW-SETUP.EXE

13430
来自专栏大数据文摘

手把手|在Python中用Bokeh实现交互式数据可视化

3.5K50
来自专栏葡萄城控件技术团队

ActiveReports 报表应用教程 (15)---报表换肤

在葡萄城ActiveReports报表中,可以设置报表中不同控件的样式,然后把这些样式保存到一个外部的XML文件当中,供其他报表使用。如果用户希望同一份报表以不...

21980
来自专栏华章科技

Excel技巧篇:嘿!别说你会复制粘贴

有时,我们用函数公式计算出了某个结果,把结果复制到表格其它地方后,却发现数据变成错误值了。。。把公式结果粘贴成数值,立马搞定这个问题。

14630
来自专栏MixLab科技+设计实验室

以图搜图技术栈

先看个案例: ? 这是什么动画 https://whatanime.ga/ 一个用于通过动画截图找出处的搜索引擎。可以找到跟动画截图相似的动画片截图,并找到动画...

66580
来自专栏每日一篇技术文章

SceneKit_入门03_节点

我们已经完成了创建工程的任务,有的人就问了,你不是要将SceneKit 游戏开发,怎么创建的是应用工程,往下看,就这么任性!

20310
来自专栏向治洪

移动客户端WebP 图片格式优化

前言 在移动端,图片一直是流量大头,一些商品列表和详情等页面,图片大小动不动就以几百K,当然在某些比较大的公司会根据具体情况去加载相应尺寸的图片,这就意味着服务...

32170

扫码关注云+社区

领取腾讯云代金券