最近需要实现对播放器一键截图，播放器的是通过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 });
}
