ios - 如何从 ionic/cordova/phonegap 中的布局截屏？

Question

我正在尝试使用 ionic 构建基于 cordova 的应用程序。在我的应用程序中，有一个部分用户可以从我们的服务器中选择图像并移动它们或对其执行一些操作(如缩放和旋转......)。最后，我希望他们能够在我们的网站和社交媒体上分享结果。我的问题是如何从他们构建的布局中截取屏幕截图？我已经看过 html2canvas library ，但它有一个问题，即保存在我们服务器上的源图像无法截屏。

Answer 1

在你的项目中安装以下插件

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/