使用uniapp uniCloud开发了一个视频转GIF小程序

使用uniapp uniCloud开发了一个视频转GIF小程序。

分享一下开发工程中遇到的坑

刚开始想要做这个小程序是因为，有时自己拍的一些视频，想转成GIF动图，但是发现安卓市场和小程序里找到的转GIF工具很多都有次数限制，或需要付费。

预示我就想自己实现一个这样的小程序可以自己用，也可以分享给他人免费试用。刚开始觉得这个其实也很简单，应该可以很快搞定，但是没想到，遇到了不少的坑。下面我就来分享一下我遇到的坑，希望对看到文章的有所帮助。

刚开始，我网上收到的方案是使用canvas将视频转为GIF：
思路是这样的：首先使用canvas的drawImage(video)+setInterval按间隔毫秒来截取视频画面，将截取的图保存到临时目录，最后使用gif.js将截图转成GIF。
这个方案在浏览器里实现是可行的，但是gif.js，内使用的是DOM操作，小程序里没法使用。

之后，找到一个对转GIF库进行小程序改在的库gifshotjs-miniprogram,预示又切换到这个库，然后再小程序里实现同样的功能。但是效果很不理想，因为这种库在小程序段使用时一方面需要使用’workrer’,另一方面小程序中canvas读取视频截图时，读取图片像素数据后使用gifshot转换这一步非常的慢，我一个5s的视频在浏览器转换几秒就好了，但是小程序里十几分钟都不一定成功。我在这部卡了很久，都没知道到合适的优化方案，预示放弃。

最后决定还是使用后端进行转换。

node 转GIF

方案一：
使用node-canvas在后端直接将视频截取并转换为gif,本地测试时OK的，但是放到Hbuilder开发的小程序里就报错了，原因是uniCloud,云端上传云函数的依赖，不支持为进制打包的依赖，而这个node-canvas是c++开发的二进制包，因此又不能使用

方案二：gif-encoder

最后，只能找到node端转gif的包gif-encoder(注意不是gifencoder,这个实测转换后问题)。
使用这个包的思路是：

1. 先在小程序端使用canvas读取视频数据画面截图，将截图转为base64数据保存在变量中。
2. 第二步：将base64数组使用jsZip包将他压缩成zip文件，上传到云存储，
3. 第三步：调用uniCloud云函数是，云函数接受参数，将zip下载到本地，保存到临时mP目录,对其进行解压，
4. 解压后，使用get-pixels包读取图片像素数据，拿到像素数据之后，就可以使用gif-encoder对其进行转换。
5. 最后想转换后的GIFbuffer return到小程序前端展示，和保存到本地。

这里分享了使用uniCloud实现小程序视频转GIF的思路，和开发过程中遇到的坑，相关代码已在另外两篇文章中有分享，有需要的可以点击链接去查看：
视频转gif(一)：前端（小程序）实现截取视频画面图片
nodejs实现多图转gif

也欢迎，扫码体验一下，如有使用问题可以联系我