Cordova Image Picker转换为base64

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

为了简单起见，设在科尔多瓦的网站（工作）的代码是这样的：

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 
}); 
});

结果数组返回结果像一个数组：文件/// ...但如何从这里转换？我想要一个函数将一个值传递给（文件）并返回base64字符串。

这里是试图这样的功能：

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; 
    };

但如何将它集成到代码？

我曾经尝试这样做（只需要选择一个图像）：

$cordovaImagePicker.getPictures(options) 
       .then(function (results) { 
        convertImgToBase64URL(results[0], function(base64Img){ 

         self.chosenImage = base64Img;         
        });       

      }, function(error) { 
       console.log(error); 
      });

但self.chosenImage被设置为空白。

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

来源

2015-04-05 James Brunet

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

这里的等效选项是

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 
};

来源：http://ngcordova.com/docs/plugins/camera/

来源

2015-05-07 02:53:29

你能使用$ 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);

来源

2015-07-01 01:14:18

这工作得很好，国际海事组织，应该是正确的答案 – David 2016-08-19 21:28:31

伟大的，我工作与选择只有一个图像？ – 2017-04-18 19:13:25

这是一个古老的问题，但我认为主要的要求没有回答，尽管备选方案很好。所以，只需要指出一种遵循建议方法的方法，就可以使用这个Base64 plugin。

安装它像往常一样

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

和$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 
     });

来源

2016-03-25 11:40:32 guillermogfer

好的建议..试过但没有工作..我正在使用cordova v6 – runtimeZero 2016-10-08 21:42:08

如果你只是想传输图像服务中使用它，你有没有做到这一点。您可以使用fileTransferPlugin。希望这会帮助你。

来源

2017-08-23 06:37:11

Cordova Image Picker转换为base64

回答

相关问题