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

Question

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

 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 canvas 丢失。我不知道为什么会这样。你能给我一个提示吗？

Answer 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 可以在截屏之前更新！

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

Ionic screenshot without 3D WebGL content

screenshot

webgl

cordova

ionic-framework