将相机捕捉图像转换为base64 - Ionic

时间:2016-01-25 08:02:45

标签: javascript cordova camera ionic-framework base64

我已经按照这个fiddler示例Image to Base64。当我使用直接图像路径链接时它工作正常,但是当我通过相机图像时它失败了。

   Camera.getPicture().then(function(imageURI) {
      var imageUrl = "http://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png";
      convertImgToDataURLviaCanvas(imageUrl, function(base64Img) {
          alert(base64Img);
      });
      var result = convertImgToDataURLviaCanvas(imageURI);
  }, function(err) {
      alert(err);
  }, {
      quality: 75,
      targetWidth: 320,
      targetHeight: 320,
      pictureSource: navigator.camera.PictureSourceType.PHOTOLIBRARY,
      destinationType: navigator.camera.DestinationType.FILE_URI,
      saveToPhotoAlbum: true
  });



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

}

在这里,如果我给图像的直接路径工作但是当我使用相机图像时它不起作用。帮助我们......提前谢谢。

3 个答案:

答案 0 :(得分:7)

无需编写自己的base64转换器。设置属性Camera.DestinationType.DATA_URL

后,插件将为您完成
destinationType : Camera.DestinationType.DATA_URL

设置属性后,Camera.getPicture()现在会返回base64版本的照片。

Camera.getPicture().then(function(imageURI) {
  console.log(imageURI) //base64 photo
});

答案 1 :(得分:0)

虽然我同意使用DATA_URL是最简单的答案,但它确实有一个主要缺点。从离子相机所基于的cordova-plugin-camera docs开始:

  

DATA_URL可能非常耗费内存,导致应用崩溃或内存不足错误。如果可能,请使用FILE_URI或NATIVE_URI

基本上,在具有低RAM(或高背景内存使用率)的手机上,有可能在垃圾收集期间杀死并重新启动您的应用,因为在本机相机打开时技术上处于后台(暂停)。

然而,避免DATA_URL更像是一个绑定,因为其他数据源仍然容易受到同样的问题,尽管由于较低的内存使用率而较少。 Android生命周期中的cordova文档提供了有关该问题的更多详细信息:

https://cordova.apache.org/docs/en/latest/guide/platforms/android/#lifecycle-guide

答案 2 :(得分:0)

问题是(可能)行:

img.crossOrigin = 'Anonymous';

This doc解释说方法toDataUrl()不适用于'受污染的画布'。将crossOrigin设置为“匿名”时,画布会受到污染。

我没有测试过这个理论。请阅读the doc