How to take a screenshot in cordova/phonegap application

Question

I am trying to take a screenshot in my cordova application using this plugin, but an error is occuring. I don't really know what the error is, as I am testing it on my android smartphone and the app just blocks. In the browser, the same is happening with this error: TypeError: Cannot read property 'save' of undefined, where 'save' comes from this code:

navigator.screenshot.save(function(error,res){
      if(error){
        console.error(error);
      }else{
        console.log('ok',res.filePath);
      }
    });

P.S.:  Also tried navigator.plugin.screenshot..., navigator.plugins.screenshot,         window.screenshot, window.plugin.screenshot and window.plugins.screenshot

P.S.2: I checked if plugin is installed with cordova plugins in cordova CLI and everything is ok, plugin           exists in plugins folder and is for cordova version>=3.0.0 and mine is newer

But of course, the browser isn't really loading the plugin, because this error also occurs there: Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:23273/www/cordova_plugins.json. No screenshot is taken, checked on my smartphone.

Answer 1

I'm using Worklight and was going through the same problem. My solution was to change de code of the file Screenshot.js to:

var formats = ['png','jpg'];

function Screenshot() {
}

Screenshot.prototype.save = function (callback,format,quality, filename) {
    format = (format || 'png').toLowerCase();
    filename = filename || 'screenshot_'+Math.round((+(new Date()) + Math.random()));
    if(formats.indexOf(format) === -1){
        return callback && callback(new Error('invalid format '+format));
    }
    quality = typeof(quality) !== 'number'?100:quality;
    cordova.exec(function(res){
        callback && callback(null,res);
    }, function(error){
        callback && callback(error);
    }, "Screenshot", "saveScreenshot", [format, quality, filename]);
};

Screenshot.install = function () {
      if (!window.plugins) {
        window.plugins = {};
      }

      window.plugins.screenshot = new Screenshot();
      return window.plugins.screenshot;
    };

cordova.addConstructor(Screenshot.install); 

This way I can make the call with the following code:

window.plugins.screenshot.save(function(error,res){
          if(error){
            alert(error);
          }else{
            alert('ok',res.filePath); //should be path/to/myScreenshot.jpg
          }
        },'jpg',50,'myScreenShot');

This worked perfectly on my Android smartphone.

I also added in res / xml / config.xml file:

<feature name="Screenshot">
    <param name="android-package" value="org.apache.cordova.screenshot.Screenshot"/>
</feature>

In the AndroidManifest.xml file:

<uses-permission android: name = "android.permission.WRITE_EXTERNAL_STORAGE" />

And added the java class in the following package: org.apache.cordova.screenshot.Screenshot

All these configurations have the information in the plugin.xml file of the plugin