解决webgl使用canvas.toDataURL()没有内容的问题

最近需要实现对播放器一键截图，播放器的是通过webgl来实现，发现截图后没有内容。

这个问题很好解决，就是在获取webgl对象的时候，多传入一个{preserveDrawingBuffer: true}，然后在使用canvas.toDataURL()获取就能够获取到了。

 var canvas = document.getElementById("canvas");
 var gl = canvas.getContext("experimental-webgl", {preserveDrawingBuffer: true});

然后通过toDataURL来获取图片，获取到的图片是base64。所以需要转成Blob

 var dataurl = gl.toDataURL()
 downloadFile('截图图片.png',dataurl)

 downloadFile(fileName, content) {
    let aLink = document.createElement("a");
    let blob = base64ToBlob(content); // new Blob([content]);
    let evt = document.createEvent("HTMLEvents");
    evt.initEvent("click", true, true); // initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
    aLink.download = fileName;
    aLink.href = URL.createObjectURL(blob);
    aLink.dispatchEvent(
      new MouseEvent("click", { bubbles: true, cancelable: true, view: window })
    ); // 兼容火狐
  }

  base64ToBlob(code) {
    let parts = code.split(";base64,");
    let contentType = parts[0].split(":")[1];
    let raw = window.atob(parts[1]);
    let rawLength = raw.length;

    let uInt8Array = new Uint8Array(rawLength);

    for (let i = 0; i < rawLength; ++i) {
      uInt8Array[i] = raw.charCodeAt(i);
    }
    return new Blob([uInt8Array], { type: contentType });
  }