最近需要實(shí)現(xiàn)對(duì)播放器一鍵截圖，播放器的是通過(guò)webgl來(lái)實(shí)現(xiàn)，發(fā)現(xiàn)截圖后沒(méi)有內(nèi)容。

這個(gè)問(wèn)題很好解決，就是在獲取webgl對(duì)象的時(shí)候，多傳入一個(gè){preserveDrawingBuffer: true}，然后在使用canvas.toDataURL()獲取就能夠獲取到了。

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

然后通過(guò)toDataURL來(lái)獲取圖片，獲取到的圖片是base64。所以需要轉(zhuǎn)成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 不加后兩個(gè)參數(shù)在FF下會(huì)報(bào)錯(cuò)  事件類型，是否冒泡，是否阻止瀏覽器的默認(rèn)行為
    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 });
  }