如何使用Ionic将照片分享到Instagram

时间:2016-08-17 12:13:23

标签: angularjs ionic-framework ngcordova

我正在尝试与Instagram分享拍摄的照片。我安装了social share plugin from ngCordova website

但我无法让它发挥作用。运行时,我没有错误。 我得到了成功的回复,但图片并未发布在Instagram的墙上。

以下是日志中的打印屏幕(xcode - >从实际设备运行到测试)。 enter image description here

有人能看出我做错了吗?

以下是我的控制器代码的一部分:

app.controller('CameraCtrl', function($scope, $cordovaCamera, $cordovaSocialSharing, $rootScope, $state){

  $scope.takePicture = function(){
    var options = {
        quality: 75,
        destinationType: Camera.DestinationType.DATA_URI,
        sourceType: Camera.PictureSourceType.CAMERA,
        encodingType: Camera.EncodingType.JPEG,
        saveToPhotoAlbum: true,
        correctOrientation:true
    };
    $cordovaCamera.getPicture(options) 
      .then(function(imageURI){
          var imagePlaceholder = document.getElementById('placeholderPicture');
          imagePlaceholder.src = imageURI;
          $rootScope.imgShare = imageURI;
          //$scope.imgURI = "data:image/jpeg;base64," + imageURI;
          //$state.go('app.camera', {image: $scope.imgURI});
          //console.log('camera data: ' + angular.toJson(imageURI));
      },  function(error){
          console.log('error camera data: ' + angular.toJson(imageURI));
    });
  }

$scope.shareViaInstagram = function(message, image){
    socialType = "instagram";
    message = "test";
    image = $rootScope.imgShare;

     $cordovaSocialSharing.shareVia(socialType, message, image, null).then(function(result) {
      console.log('image shared to Instagram ', result);
      console.log('dddd', image);
      console.log('######', $rootScope.imgShare);
      //$state.go('app.finish');
}, function(err) {
      console.log('error in sharing to Instagram ', err);
});

  }

});

我的部分HTML代码:

<div class="wrapperCamera">
        <div class="cameraContent padding">
            <img id="placeholderPicture" ng-src="{{imgShare}}">
            <br>
            <h2 class="customH2Camera">looking good!</h2>
            <br><br>
            <div class="socialIcons">
                <a href="" ng-click="shareViaInstagram(null, null, imgShare, null)"><img src="img/iconInstagram.svg" width="40"></a>
                &nbsp;&nbsp;&nbsp;
                <a href="" ng-click="shareViaFacebook(null, null, imgShare, null)"><img src="img/iconFacebook.svg" width="40"></a>
            </div>
        </div><!-- end cameraContent -->
    </div><!-- end WrapperCamera -->    

2 个答案:

答案 0 :(得分:1)

  module.controller('ThisCtrl', function($scope, $cordovaInstagram) {
      // Get image from camera, base64 is good. See the
      // $cordovaCamera docs for more info
        $cordovaInstagram.share($scope.image.data, $scope.image.caption).then(function() {
        // Worked
      }, function(err) {
        // Didn't work
      });
    })

答案 1 :(得分:1)

在cordova的deviceready事件中包含您的插件调用。它确保在调用插件之前设备已完全加载。

document.addEventListener("deviceready", function () { 
  // your plugin call here 
});

您也可以使用$ionicPlatform.ready(function() {});

阅读本文以获取更多信息:ngCordova common issues