How to take screen shot from a layout in ionic/cor

问题:

I'm trying to build a cordova based application using ionic. In my application , there is a section which users can select images from our server and move them or do some actions on it(like zoom & rotate ...). At the end I want them to be able to share the result on our website and social medias. My problem is that how can I take a screen shot from the layout which they build it? I've already seen html2canvas library , but it has a problem with out source images that are saved on our server and does not take screen shot of them.

回答1:

Install the following plugin to your project

cordova plugin add https://github.com/gitawego/cordova-screenshot.git

Add this service to your angular module

.service('$cordovaScreenshot', ['$q', function($q) {
    return {
        capture: function(filename, extension, quality) {
            extension = extension || 'jpg';
            quality = quality || '100';

            var defer = $q.defer();

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

            return defer.promise;
        }
    };
}]);

Than, you can simply add a button to take a screen shot with this service.

I have a nice example here for taking a screenshot and share it on Facebook:

//Take a picture
$cordovaScreenshot.capture()
     .then(function(result) {
          //on success you get the image url

          //post on facebook (image & link can be null)
          $cordovaSocialSharing
            .shareViaFacebook("Text to post here...", result, "Link to share")
                  .then(function(result) {
                        //do something on post success or ignore it...
                   }, function(err) {
                        console.log("there was an error sharing!");
                   });
     }, function(err) {
         console.log("there was an error taking a a screenshot!");
 });

Please note that this example uses the social sharing plugin by ngCordova: http://ngcordova.com/docs/plugins/socialSharing/

回答2:

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:

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

回答3:

The easiest way is to use this plugin:

com.darktalker.cordova.screenshot