如何从离子/ cordova / phonegap布局屏幕截图？ [英] How to take screen shot from a layout in ionic/cordova/phonegap?

问题描述

我正在尝试使用离子型基于cordova的应用程序。
在我的应用程序中，有一个部分，用户可以从我们的服务器选择图像，并移动它们或做一些操作（如缩放&旋转...）。最后，我希望他们能够在我们的网站和社交媒体上分享结果。我的问题是，我怎么能从他们构建它的布局拍摄屏幕截图？我已经看过html2canvas库，但它有一个问题，出现源图像保存在我们的服务器上，并没有拍摄他们的屏幕截图。

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.

推荐答案

将以下插件安装到您的项目中

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.

我有一个很好的例子来截图并在Facebook上分享：

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!");
 });

请注意，此示例使用ngCordova的社交共享插件：
http://ngcordova.com/docs/plugins/socialSharing/

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

这篇关于如何从离子/ cordova / phonegap布局屏幕截图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！