如何從離子/科爾多瓦/ phonegap中的佈局拍攝屏幕截圖？

Question

我試圖建立一個基於cordova的應用程序使用離子。 在我的應用程序中，有一個部分，用戶可以從我們的服務器中選擇圖像並移動它們或對其執行一些操作（如縮放&旋轉...）。最後，我希望他們能夠在我們的網站和社交媒體上分享結果。我的問題是，我怎樣才能從他們構建它的佈局中獲取屏幕截圖？我已經看到了html2canvas庫，但它存儲在我們的服務器上的外源圖像有問題，並且不需要它們的屏幕截圖。

Answer 1

文件Screenshot.js到：

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

這工作完全在我的Android智能手機。

我在res還添加/ XML/config.xml文件：

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

在AndroidManifest.xml文件：

並添加下面的包中的Java類： org.apache.cordova.screenshot.Screenshot

所有這些配置都包含plugin.xml中的信息插件

Answer 2

最簡單的辦法的文件是使用這個插件：

com.darktalker.cordova.screenshot

Answer 3

安裝以下插件到您的項目

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

這項服務添加到您的角模塊

.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; 
     } 
    }; 
}]); 

比，你可以簡單地添加一個按鈕採取這項服務的屏幕截圖。

我在這裏有一個很好的例子採取截圖，並在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!"); 
}); 

請注意，本例中使用由ngCordova社會共享插件： http://ngcordova.com/docs/plugins/socialSharing/