Ionic screenshot without 3D WebGL content

Question

I have created an ionic app with a 3D webgl canvas. I tried taking a screenshot of my html including the webgl content with the following code (from 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);

The screenshot is taken successfully but the rendered 3d canvas is missing. I don't know why that happens. Can you give me a hint please?

Answer 1

For those of you who encounter the same problem, I solved it using the following workaround:

Simply add an <img id="placeholder" src=""/> below your <canvas id="cv" ></canvas> and modify screenshot function as follows:

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);

make sure you add a delay so that the DOM can be updated before taking the screenshot!