如何将图像转换为Base64字符串?

4

你好,我正在尝试使用ionic制作一个简单的应用程序,并使用相机或从图库或文件系统中选择文件并发送到服务器或上传到服务器。我找到了一个插件,它可以捕获一张图片并发送base64字符串。插件如下:http://ngcordova.com/docs/plugins/camera/。使用这个插件,我能够获取到base64字符串。

$cordovaCamera.getPicture(options).then(function(imageData) {
      var image = document.getElementById('myImage');
      image.src = "data:image/jpeg;base64," + imageData;
    }, function(err) {
      // error
    });

我曾经发送给服务器的Base64字符串。

但我的问题是,当我使用这个插件图库插件时:

http://ngcordova.com/docs/plugins/imagePicker/ 它只会把图片的url(在内存中)发送给我。我们能否在从图像选择器中选择图像后获得Base64字符串。

$cordovaImagePicker.getPictures(options)
    .then(function (results) {
      for (var i = 0; i < results.length; i++) {
        console.log('Image URI: ' + results[i]);
      }
    }, function(error) {
      // error getting photos
    });

换句话说,当我使用相机时,如上所示,我会得到base64字符串。但是当我使用图像选择器插件时,我会得到图像URL。我能否获得base64字符串,以便我能够发送或上传到服务器。 如何将图像URL转换为base64字符串?


请查看以下帖子 https://dev59.com/d2025IYBdhLWcg3wNTAV 可以帮助您解决问题。 - user1608841
是的,它正在工作中,谢谢你的帮助.. :) - user944513
好的,我将其发布为答案,请接受它作为答案 @user944513 - user1608841
2个回答

4

尝试这个100%可行的代码。首先,您需要下载ngCordova.min.js文件并将其包含在您的index.html文件中。按照以下代码操作。

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

.controller('DashCtrl', function($scope,$cordovaCamera) {
 $scope.imgUrl;
 $scope.dataImg;
 $scope.tackPicture = function(){
   var options = {
      quality: 50,
      destinationType: Camera.DestinationType.DATA_URL,
      sourceType: Camera.PictureSourceType.CAMERA,
      allowEdit: true,
      encodingType: Camera.EncodingType.JPEG,
      targetWidth: 100,
      targetHeight: 100,
      popoverOptions: CameraPopoverOptions,
      saveToPhotoAlbum: false,
   correctOrientation:true
    };
  $cordovaCamera.getPicture(options).then(function(imageData) {
      //var image = document.getElementById('myImage');
   $scope.dataImg = imageData; // <--- this is your Base64 string 
      $scope.imgUrl = "data:image/jpeg;base64," + imageData;
    }, function(err) {
      // error
    });
 }
})

.controller('ChatsCtrl', function($scope, Chats) {
  // With the new view caching in Ionic, Controllers are only called
  // when they are recreated or on app start, instead of every page change.
  // To listen for when this page is active (for example, to refresh data),
  // listen for the $ionicView.enter event:
  //
  //$scope.$on('$ionicView.enter', function(e) {
  //});

  $scope.chats = Chats.all();
  $scope.remove = function(chat) {
    Chats.remove(chat);
  };
})

.controller('ChatDetailCtrl', function($scope, $stateParams, Chats) {
  $scope.chat = Chats.get($stateParams.chatId);
})

.controller('AccountCtrl', function($scope) {
  $scope.settings = {
    enableFriends: true
  };
});
<ion-view view-title="Dashboard">
  <ion-content class="padding">
   <button class="button icon-left ion-ios-camera button-block button-positive" ng-click="tackPicture()">
     OPEN CAMERA
   </button>
     <div class="item item-avatar">
    <img ng-src="{{ imgUrl }}">
   
    <p>{{ dataImg }}</p>
  </div>
  </ion-content>
</ion-view>


请注意,使用Camera.DestinationType.DATA_URL将会生成大量的内存负荷,在许多情况下可能会触发一个“错误”,即在用户完成拍摄/选择照片后应用程序将重新启动。 - Camilo Casadiego

2

要将图像转换为base64,可以使用HTML5 Canvas,如下所述:

如何使用JavaScript将图像转换为base64字符串

请参考上述问题。

使用以下代码:

/**
 * Convert an image 
 * to a base64 url
 * @param  {String}   url         
 * @param  {Function} callback    
 * @param  {String}   [outputFormat=image/png]           
 */
function convertImgToBase64URL(url, callback, outputFormat){
    var img = new Image();
    img.crossOrigin = 'Anonymous';
    img.onload = function(){
        var canvas = document.createElement('CANVAS'),
        ctx = canvas.getContext('2d'), dataURL;
        canvas.height = this.height;
        canvas.width = this.width;
        ctx.drawImage(this, 0, 0);
        dataURL = canvas.toDataURL(outputFormat);
        callback(dataURL);
        canvas = null; 
    };
    img.src = url;
}

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接