项目要求：
底层实现视频转场特效的功能， WEB展示项目支持的所有的转场特效动画。所以使用webgl编写转场特效。但是由于特效动画很多，webgl渲染耗费很大性能。所以要求：在第一次渲染的时候用webgl渲染，自动生成gif动图，之后渲染就是直接拿gif图片。
思路：
webgl渲染时，抓取帧画面，制作gif动图。使用gif.js
遇到的问题：
- 一开始以为直接引入 gif.worker.js 文件即可，后发现需要在GIF实例对象中配置。
let gif_obj = new GIF({
workers: 2,
quality: 10,
width: canvas.width,
height: canvas.height,
workerScript: '../public/static/js/gif.worker.js' //如果是cdn引入方式需要配置这一项
});
2.使用addFrame 方法导入canvas帧画面时总是不对。 无法触发finished 事件。
是因为，在使用此addFrame 方法导入帧画面时，要确保此图片已经被下载了。
代码：
//img_arrs 为数组，里面放置了我在webgl中抓取的帧画面
//let imgurl = canvas.toDataURL("image/png");
//img_arrs.push(imgurl);
for(let e_elem of img_arrs){
const img_obj = await this.baseImg(e_elem);
gif_obj.addFrame(img_obj, {delay: 100});
}
gif_obj.render();
if(gif_obj.frames.length < 26) return;
gif_obj.on('finished', async (blob) => {
const img_url = URL.createObjectURL(blob);
...
})
//保证base64格式的图片下载并转化为 Image对象
baseImg(base64img){
return new Promise((resolve, reject) => {
const img = new Image();
img.src = base64img;
img.onload = () => {
resolve(img)
}
img.onerror = (e) => {
reject(e)
}
});
}
