视频转gif(二):后端，云函数nodejs实现多图转gif

最近在自己的小程序实现视频转gif的功能，开发过程中发现网上的很多方案在小程序中实现效果不好或不能实现，比如：
使用前端canvas方案实现的(gif.js，gifshot.js等)，在h5上效果没问题，但是在小程序中获取数据的时候极慢；
后来就转而使用uniCloud的云函数方式实现，即使用node.js实现。node.js使用node-canvas后端生成gif,这个是可以的，但是uniCloud使用的服务器node版本自己无法升级，导致想要发布，就只能放弃这个方案。
自己研究了很久，最终使用前端canvas按间隔时间截取一组图片，然后上传到uniCloud，再通过node的gif-encoder，get-pixels等第三方包在云服务端将图片合成gif文件，上传到服务器，就可以在小程序将文件下载到本地了。

小程序前端生成视频截图的代码参考:
视频转gif(一)：前端（小程序）实现截取视频画面图片

node.js 使用gif-encoder和get-pixels实现多图转gif

const GIFEncoder = require('gif-encoder');
const getPixels = require('get-pixels')const fs = require('fs');
const path = require('path');const urlArr = ['/tmp/1.png','/tmp/2.png','/tmp/3.png','/tmp/4.png','/tmp/5.png','/tmp/6.png',
]const gif = new GIFEncoder(300, 150);
var file = fs.createWriteStream(`pixels-gif${Date.now()}.gif`);
gif.pipe(file)
gif.writeHeader();
gif.setRepeat(0); // 0 for repeat, -1 for no-repeat
gif.setDelay(500); // frame delay in ms
gif.setQuality(10); // image quality. 10 is default.gif.on('readable', async (err) => {console.log('readable:');
})
gif.on('end', function () {console.log('end:');
});
var addToGif = async function (images, counter = 0) {// http + gif-encodertry {// 读取图片像素信息const pixels = await getImgPixels(urlArr[counter])gif.addFrame(pixels.data)if (counter === images.length - 1) {gif.finish();} else {addToGif(images, ++counter);}} catch(err) {console.log("Bad image path", err)}
}// http 请求图片资源，转为pixels（getPixels包实现）
function getImgPixels(url, name) {const p = new Promise((resolve, reject) => {getPixels(url, function(err, pixels) {if(err) {console.log("Bad image path")reject(err)return}resolve(pixels)})})return p
}addToGif(urlArr)

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

视频转gif(二):后端，云函数nodejs实现多图转gif相关推荐

微信小程序云函数NodeJs如何等待两次异步操作后返回数据给前端
文章目录 1.引入 2.需求举例 3.错误例子 4.分析错误 5.尝试解决方法 6.解决方法.代码及结果 6.后记 1.引入最近在搞小程序,采用的是微信云开发云函数作为后端,云函数是nodejs开发 ...
利用Bmob云后端云函数实现移动应用与数据库的数据交互
关于我,欢迎关注 csdn博客:ccapton(http://blog.csdn.net/ccapton) 微信:Ccapton Github: (https://www.github.com/cca ...
微信小程序云开发学习笔记（二）云函数
一.创建一个云开发的小程序 1. 如下图所示创建小程序 2. 删除无关文件删除前: 删除后: 3. 删除无关代码 index.wxml index.wxss 内的代码全部清空,index.js保留如 ...
微信小程序通过云函数下载视频
一.正常情况下载视频正常流程:先调用的downloadFile接口将文件下载在本地,然后用downLoadFile返回的临时路径作为参数去调用saveVideoToPhotosAlbum wx.do ...
淘宝天猫京东考拉唯品会拼多多美团实现查券返利微信公众号云函数
本打着不让中间商赚差价的原则来开发本插件,但是发现各大cps平台对个人开发者限制较多,因此不得以只能使用了第三方推手平台--折淘客. 本插件需使用uniapp和unicloud,使用起来比较简单,un ...
腾讯云无服务器云函数架构精解
欢迎大家前往腾讯云技术社区,获取更多腾讯海量技术实践干货哦~ 关键字:无服务器,云函数分享人:陈杰腾讯云架构平台部技术专家,10年云计算经验,现供职于腾讯架构平台部,负责弹性计算及云函数技术研发, ...
微信小程序 - - 云开发の云函数学习笔记
前后端分离:前端请求云函数(书写逻辑),后端请求数据库(操作数据) 一.云函数初体验错误1:Cannot find module 'wx-server-sdk' # getData/index.js ...
【微信小程序】云函数入门（保姆级别）
前言个人认为一个非常好的微信小程序教学视频正文开始要使用云函数,当然需要AppID啦如何找到AppID 填入AppID 选择不使用模板,点击全部分类,找到不使用模板找到云开发第一次使用云函 ...
标题：如何通过python或者云函数定时刷运动步数
标题:如何通过python或者云函数定时刷运动步数 ----- 20来行代码轻松搞定!让你微信运动天天排第一一. 安装小米运动 1.各应用商店安装小米运动APP,选择手机号注册. 2.进入我的,第三 ...

视频转gif(二):后端，云函数nodejs实现多图转gif

视频转gif(二):后端，云函数nodejs实现多图转gif相关推荐

最新文章

热门文章