Cordova插件相机使base64图像无法解码

时间:2015-12-13 23:35:06

标签: javascript android image cordova ionic

尝试在cordova-plugin-camera中将jpeg图像编码为base64时出现问题。它无法解码为图像

我在离子项目中安装了cordova插件添加cordova-plugin-camera

我的设置

离子版:1.7.11

cordova版本:5.4.1

我的档案

-------------------- index.html ------------------------ -

我添加了两个lib

<script src="lib/ngCordova/dist/ng-cordova.js"></script> 
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>

-------------------- js / app.js ---------------------- --------

var myApp = angular.module('starter', ['ionic', 'starter.controllers', 'ionic-datepicker', 'ngCordova'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if (window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);

    }

    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

  .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/login.html',
    controller: 'AppCtrl'
  })
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/playlists');
});

myApp.config(function($compileProvider){
  $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
})

---------------------- js / controller.js -------------------- -------

angular.module('starter.controllers', [])

.controller('AppCtrl', function($scope, $ionicModal
          , $timeout, $ionicPopup, $http
          , $location, $state, $ionicLoading
          , $window, $cordovaCamera, $ionicPlatform) {

    // Form data for the login modal
    $scope.lastPhoto = "";

    $scope.choosePicture = function(){
        $ionicPlatform.ready(function() {

        var options = {
            quality: 70,
            destinationType: Camera.DestinationType.DATA_URL,
            sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
            allowEdit: false,
            encodingType: Camera.EncodingType.JPEG,
            targetWidth: 200,
            targetHeight: 200,
            correctOrientation:true
        };

            $cordovaCamera.getPicture(options).then(function(imageData) {
                $scope.lastPhoto = "data:image/jpeg;base64," + imageData;

                var validatePopup = $ionicPopup.alert({
                    title: 'show encoded string',
                    template: imageData
                });

                validatePopup.then(function(res) {
                    console.log('Finished encoded');
                });

                $http.get('http://192.168.0.116/api/inserttemp?params='+imageData).then(function (resp){
                    console.log('send encoded string to server success', resp);
                }, function(err) {
                    console.log('there is an error in api');
                });
            }, function(err) {
                console.log('there is an error in camera');
            });

        }, false);
    };
  };
})

--------------------------- /templates/login.html -------------- -------

<ion-modal-view>
  <ion-header-bar>
    <h1 class="title title-center">Image Base 64</h1>
    <div class="buttons">
      <button class="button button-clear" ng-click="closeLogin()">Exit</button>
    </div>
  </ion-header-bar>
  <ion-content>
    <form ng-submit="">
      <div class="list">
        <div style="width:100%;">
          <img id="pictProfile" data-ng-src="{{lastPhoto}}" ng-src="{{lastPhoto}}" style="display: block;margin-left: auto;margin-right: auto">
        </div>
        <button style="padding-left:20px;margin-padding:20px;" ng-click="choosePicture()" class="button button-block button-positive" type="button">Choose Picture</button>      
      </div>
    </form>
  </ion-content>
</ion-modal-view>

当我尝试从这里编码图像时

<!-- http://coenraets.org/blog/wp-content/uploads/2013/11/cordova.jpg -->

使用此在线工具显示不同的编码字符串

<!-- https://www.base64-image.de/ -->

我尝试使用此在线工具解码base64

<!-- http://codebeautify.org/base64-to-image-converter -->

有没有与此类似的问题?

我感谢任何帮助 感谢

最好的问候,Nirwan

0 个答案:

没有答案