没有 3D WebGL 内容的离子截图

【问题标题】：Ionic screenshot without 3D WebGL content没有 3D WebGL 内容的离子截图
【发布时间】：2016-10-14 20:51:54
【问题描述】：

我创建了一个带有 3D webgl 画布的 ionic 应用程序。我尝试使用以下代码（来自https://www.npmjs.com/package/com.darktalker.cordova.screenshot）截取我的 html 包括 webgl 内容的屏幕截图：

 navigator.screenshot.save(function(error, res) {
   if (error) {
     console.error(error);
   } else {
     console.log('screenshot saved in: ', res.filePath);
     defer.resolve(res.filePath);
   }
 }, extension, quality, filename);

截图成功，但渲染的 3d 画布丢失。我不知道为什么会这样。请给个提示好吗？

【问题讨论】：

标签： cordova ionic-framework webgl screenshot

【解决方案1】：

对于那些遇到同样问题的人，我使用以下解决方法解决了它：

只需在您的<canvas id="cv" ></canvas> 下方添加一个<img id="placeholder" src=""/> 并修改截图功能如下：

render();
var data = document.getElementById("cv").toDataURL();
document.getElementById("placeholder").src = data;
window.setTimeout(function(){
  navigator.screenshot.save(function(error, res) {
    if (error) {
      console.error(error);
    } else {
      console.log('screenshot saved in: ', res.filePath);
      defer.resolve(res.filePath);
    }
    document.getElementById("placeholder").src = "";
  }, extension, quality, filename);
  return defer.promise;
},1000);

确保添加延迟，以便在截屏之前更新 DOM！

【讨论】：