将相机捕获图像转换为 base64 - Ionic答案

【问题标题】：convert camera capture image to base64 - Ionic将相机捕获图像转换为 base64 - Ionic
【发布时间】：2016-01-25 08:02:45
【问题描述】：

我已经按照这个提琴手示例图像到 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;

}

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

【问题讨论】：

标签： javascript cordova camera ionic-framework base64

【解决方案1】：

无需编写自己的 base64 转换器。一旦您设置属性Camera.DestinationType.DATA_URL，该插件将为您执行此操作

destinationType : Camera.DestinationType.DATA_URL

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

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

【讨论】：

感谢您的回复。所以我不想使用 convertImgToDataURLviaCanvas 函数？
@ganesh 没错，这样做没有任何意义，因为当且仅当您设置了 destinationType 时，Camera 插件才会为您返回一个 base64 字符串：Camera.DestinationType.DATA_URL
您知道如何将 Data_Url 转换为文件吗？因为我想用 XMLHttpRequest 发送它
@MissakBoyajian 改用Camera.DestinationType.FILE_URI 或Camera.DestinationType.NATIVE_URI

【解决方案2】：

虽然我同意使用 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

【讨论】：

【解决方案3】：

问题是（可能）这行：

img.crossOrigin = 'Anonymous';

This doc 解释说toDataUrl() 方法不适用于“受污染的画布”。当您将 crossOrigin 设置为“匿名”时，画布被污染。

我还没有测试过这个理论。只需阅读the doc。

【讨论】：