ColdDay / Videotogif
video to gif 视频转gif制作表情包插件(可以添加文字)
Stars: ✭ 131
Projects that are alternatives of or similar to Videotogif
Ccapture.js
A library to capture canvas-based animations at a fixed framerate
Stars: ✭ 2,836 (+2064.89%)
Mutual labels: gif, canvas
Gcanvas
A lightweight cross-platform graphics rendering engine. (超轻量的跨平台图形引擎) https://alibaba.github.io/GCanvas
Stars: ✭ 1,705 (+1201.53%)
Mutual labels: canvas
Terminal Canvas
Manipulate the cursor in your terminal via high-performant, low-level, canvas-like API
Stars: ✭ 125 (-4.58%)
Mutual labels: canvas
Pixelfarm
From Vectors to (sub) Pixels, C# 2D Rendering Library
Stars: ✭ 120 (-8.4%)
Mutual labels: canvas
Leaflet.canvaslayer.field
Load and style Raster files in Leaflet (geotiff & asciigrid)
Stars: ✭ 128 (-2.29%)
Mutual labels: canvas
Xsound
Web Audio API Library for Synthesizer, Effects, Visualization, Multi-Track Recording, Audio Streaming, Visual Audio Sprite ...
Stars: ✭ 123 (-6.11%)
Mutual labels: canvas
Git Cheats
Git Cheats - Interactive Cheatsheet For Git Commands
Stars: ✭ 124 (-5.34%)
Mutual labels: gif
Wxdraw
A lightweight canvas library which providing 2d draw for weapp 微信小程序2d动画库 😎 🐼
Stars: ✭ 1,625 (+1140.46%)
Mutual labels: canvas
G2
📊 A highly interactive data-driven visualization grammar for statistical charts.
Stars: ✭ 11,020 (+8312.21%)
Mutual labels: canvas
Mp canvas drawer
🚀 微信小程序上canvas绘制图片助手,一个json就制作分享朋友圈图片
Stars: ✭ 1,611 (+1129.77%)
Mutual labels: canvas
Mergi
go library for image programming (merge, crop, resize, watermark, animate, ease, transit)
Stars: ✭ 127 (-3.05%)
Mutual labels: gif
Bubbly Bg
Beautiful bubbly backgrounds in less than 1kB (750 bytes gzipped)
Stars: ✭ 1,554 (+1086.26%)
Mutual labels: canvas
Gify
JavaScript API for decoding/parsing information from animated GIFs using ArrayBuffers.
Stars: ✭ 124 (-5.34%)
Mutual labels: gif
Bbwebimage
A high performance Swift library for downloading, caching and editing web images asynchronously.
Stars: ✭ 128 (-2.29%)
Mutual labels: gif
Chrome浏览器插件安装点这里 点这安装 Install
背景
上面这张图大家都见过吧,哈哈
现在聊天时候少不了斗图,光发静图逼格略低了些,GIF在斗图中肯定略胜一筹,手绘动画生成GIF对大多数人来说要求搞了些,不过给某人拍个搞笑的短视频,再加点逗比文字,哈哈,从此你就走上的斗图高手之列,没人敢惹你,一言不合就斗图
网上搜一下视频制作表情包,也搜到了几个,但是不多,而且大部分只是单纯的转GIF,可以添加文字的用起来也不是很方便。
更可怕的是有的制作GIF的网址超过60帧就要开通VIP,呵呵,看不下去! 所以我决定自己贡献一个免费好用的表情包制作工具
工具主要就界面如下
工具不仅提供视频转GIF功能,而且在转换GIF的同时还能添加文字,精确到每一帧,想让文字显示在哪个位置、时间,以及文字大小颜色都可以设置,全部都是浏览器本地生成,没有任何网络请求,离线也能使用。内容随意更改,点击生成就能得到修改后的GIF
使用教程
实现过程
- 视频播放时通过canvas将每一帧原图保存到全局数组FPS_LIST中,同时需要把每一帧的播放时间存到图片中,视频在播放的时候,点击文字定位图标,获取当前视频播放时间,填充到文字时间输入框中
- 点击生成需要重新遍历FPS_LIST,为每一帧添加文字,这里需要注意的时,每行文字都有自己对应显示的时间范围,所以需要判断文字绘制在那一帧图片中。然后生成新的图片数组GIF_IMG_LIST
- 将图片交给gifshot,最后得到生成后的GIF
是不是很简单
需要声明的是前端生成GIF底层借助一个开源的js库,https://github.com/yahoo/gifshot 本工具是在它的基础上进行的二次开发,感谢作者开源贡献
关于谷歌浏览器开发,可以查看在线文档
工具具体实现可以访问我的github查看源代码,核心代码仅200行,如果对你有帮助,也欢迎 Star
希望我的工具能够给爱斗图的朋友们带来一些乐趣
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].