Cordova Image Picker转换为base64

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

我无法将图像转换为使用ngCordova imagePicker选择的base64格式。

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

为了简单起见,Cordova网站上提供的代码(可行)是:

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.

结果数组返回一个结果数组,如:file /// ...但是如何从这里转换?我想要一个函数,您将值传递给(文件)并返回base64字符串。

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.

但是self.chosenImage被设置为空白。

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

可能是一个异步问题,但如何最好地解决它?

4 个解决方案

#1

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

你可以使用$ cordovaCamera并将sourceType更改为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.

有趣的是,ngCordova ImagePicker没有将图片转换为base64的功能。但是,ngCordova $ cordovaCamera功能确实可用,但仅适用于立即拍摄的照片。

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.

这是一个老问题,但我认为主要要求没有得到解答,尽管替代提案很好。所以只是指出一个遵循建议方式的方法,你可以使用这个Base64插件。

Install it as usual

像往常一样安装它

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

and use it within the $cordovaImagePicker.getPictures success callback

并在$ cordovaImagePicker.getPictures成功回调中使用它

$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.

如果您只想要传输图像,则不必执行此操作。您可以使用fileTransferPlugin。希望这会帮助你。

#1