项目要求：

底层实现视频转场特效的功能， WEB展示项目支持的所有的转场特效动画。所以使用webgl编写转场特效。但是由于特效动画很多，webgl渲染耗费很大性能。所以要求：在第一次渲染的时候用webgl渲染，自动生成gif动图，之后渲染就是直接拿gif图片。

思路：

webgl渲染时，抓取帧画面，制作gif动图。使用gif.js

遇到的问题：

1. 一开始以为直接引入 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)
        }
      });
    }