Cordova Image Picker convert to base64

问题:

I am having trouble converting an image to base64 format that has been selected using the ngCordova imagePicker.

To keep things simple, the code provided on the Cordova site (which works) is this:

module.controller('ThisCtrl', function($scope, $cordovaImagePicker) {    var options = {    maximumImagesCount: 10,    width: 800,    height: 800,    quality: 80   };    $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 }); }); 

The results array returns an array of results like: file///... but how to convert from here? I would like a function that you pass in a value to (the file) and returns the base64 string.

Here is a function that attempts this:

function convertImgToBase64URL(url, callback, outputFormat){          var canvas = document.createElement('CANVAS'),             ctx = canvas.getContext('2d'),             img = new Image();         img.crossOrigin = 'Anonymous';         img.onload = function(){             var dataURL;             canvas.height = img.height;             canvas.width = img.width;             ctx.drawImage(img, 0, 0);             dataURL = canvas.toDataURL(outputFormat);             callback(dataURL);             canvas = null;          };         img.src = url;     }; 

But how to integrate it into the code?

I have tried this (only need to pick one image):

$cordovaImagePicker.getPictures(options)                 .then(function (results) {                     convertImgToBase64URL(results[0], function(base64Img){                          self.chosenImage = base64Img;                                                     });                                         }, function(error) {                 console.log(error);              });  

but self.chosenImage gets set to blank.

Might be an async issue but how best to resolve it?

回答1:

Could you use $cordovaCamera and change the sourceType to Camera.PictureSourceType.PHOTOLIBRARY ?

document.addEventListener("deviceready", function () {      var options = {       quality: 50,       destinationType: Camera.DestinationType.DATA_URL,       sourceType: Camera.PictureSourceType.PHOTOLIBRARY,       allowEdit: true,       encodingType: Camera.EncodingType.JPEG,       targetWidth: 100,       targetHeight: 100,       popoverOptions: CameraPopoverOptions,       saveToPhotoAlbum: false     };      $cordovaCamera.getPicture(options).then(function(imageData) {       var image = document.getElementById('myImage');       image.src = "data:image/jpeg;base64," + imageData;     }, function(err) {       // error     });    }, false); 

回答2:

Interestingly, the ngCordova ImagePicker does not have the function to convert a picture to base64. However, the ngCordova $cordovaCamera function does, albeit only for immediately captured photos.

Here the equivalent options would be

 var options = {   quality: 80,   destinationType: Camera.DestinationType.DATA_URL,   sourceType: Camera.PictureSourceType.CAMERA,   allowEdit: true,   encodingType: Camera.EncodingType.JPEG,   targetWidth: 800,   targetHeight: 800,   popoverOptions: CameraPopoverOptions,   saveToPhotoAlbum: false }; 

Source: http://ngcordova.com/docs/plugins/camera/

回答3:

This is an old question, but I think the main request is not answered although the alternative proposal is great. So just to point out a method that follows the suggested way, you could use this Base64 plugin.

Install it as usual

cordova plugin add https://github.com/hazemhagrass/phonegap-base64 

and use it within the $cordovaImagePicker.getPictures success callback

$cordovaImagePicker.getPictures(options)         .then(function (results) {             for (var i = 0; i < results.length; i++) {                 console.log('Image URI: ' + results[i]);                 $scope.imageUri = results[i];                 // Encode URI to Base64                window.plugins.Base64.encodeFile($scope.imageUri, function(base64){                   // Save images in Base64                   $scope.images.push(base64);                });             }          }, function(error) {             // error getting photos         }); 

回答4:

If you just want transfer image to serve, you haven't do this. You can use fileTransferPlugin. Hope this will hepl you.

文章来源: Cordova Image Picker convert to base64