使用Ionic框架截屏

Question

我正在开发一个带有地理定位（Google Api）的Ionic应用程序，但这并不重要。在右上角有一个按钮，我想让它拍摄屏幕截图，并自动弹出选项卡，在选项中可以通过电子邮件、viber等方式发送该屏幕截图图像，但我不知道如何拍摄该屏幕截图，我经过了一番谷歌搜索，但没有任何进展，请帮忙。

app.controller('MapCtrl', function($scope, $cordovaGeolocation, $ionicLoading, $ionicPlatform) {

    $ionicPlatform.ready(function() {

        $ionicLoading.show({
            template: '<ion-spinner icon="bubbles"></ion-spinner><br/>Acquiring location!'
        });

        var posOptions = {
            enableHighAccuracy: true,
            timeout: 20000,
            maximumAge: 0
        };
        $cordovaGeolocation.getCurrentPosition(posOptions).then(function (position) {
            var lat  = position.coords.latitude;
            var long = position.coords.longitude;

            var myLatlng = new google.maps.LatLng(lat, long);

            var mapOptions = {
                center: myLatlng,
                zoom: 16,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };          

            var map = new google.maps.Map(document.getElementById("map"), mapOptions);          

            $scope.map = map;   
            $ionicLoading.hide();   

            var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'Lokacija'
        });


        }, function(err) {
            $ionicLoading.hide();
            console.log(err);
        });
    });               
});

- Mark

Answer 1

以下代码应该会有所帮助
*该函数将会截屏并弹出分享窗口
更多详情请访问SocialSharing和Screenshot Ionic官方页面。

import { SocialSharing } from '@ionic-native/social-sharing/ngx';
import { Screenshot } from '@ionic-native/screenshot/ngx';

constructor(
private socialSharing: SocialSharing,
private screenshot: Screenshot
) { }

 share(){
    this.platform.ready().then(() => {
      this.screenshot.URI(80)
        .then((res) => {
         //this.socialSharing.share('df',res.URI,null)
         this.socialSharing.share('',null,res.URI,null)
           .then(() => {},
             () => { 
               alert('SocialSharing failed');
             });
           },
          () => {
          alert('Screenshot failed');
          });
        });
  }

- Sanjiban Roy

Answer 2

据我所知，有两个选择：

• 使用第三方的 Cordova 插件，比如 https://github.com/gitawego/cordova-screenshot - 这很可能会包括应用程序的界面元素，这可能不是你想要的。
• 也许一个更好的主意是使用 Google 静态地图 API - 你可以将当前动态地图的参数传递给它，它会返回一个图像版本。

- Joe Clay

Answer 3

这应该可以帮助你入门：如何在ionic中截屏

当你从插件中收到图片后，你可以使用ionic的弹出服务将其显示在那里。

- Noshii

---

我又卡住了，不知道如何通过控制器MapCtrl从该服务中检索图片并将其分配给变量。 - Mark

抱歉等待时间有点长，我周末离开了。如果我看得正确，该服务应该会将结果直接返回给您，因此您可以例如创建一个 <img> 标签，在 source 属性中只需使用调用服务时获取的“result”。正如您在服务中所看到的那样，他将文件路径分配给 promise，然后返回 promise，因此在 then(result) 中，您可以获得所拍照片的文件路径。 - Noshii