将图像从科尔多瓦 imagepicker 转换为 base64答案

【问题标题】：convert image from cordova imagepicker to base64将图像从科尔多瓦 imagepicker 转换为 base64
【发布时间】：2017-08-21 06:53:47
【问题描述】：

我正在使用以下 sn-p 进行转换操作（图像从 cordova 图像选择器到 base64 并将它们存储在一个数组中）但由于异步行为，它分配了相同的字符串从第一张图像到所有图像。我尝试了while循环，但随后应用程序崩溃了。任何建议我该如何解决这个问题。

编辑：结果[0] 已定义，但所有其他结果[i] 为“未定义”，因此图像源在所有迭代中保持相同

window.imagePicker.getPictures(
  function(results) {
    for (var i = 0; i < results.length; i++) {
      var img = new Image();
      img.crossOrigin = 'Anonymous';
      img.src = results[i];
      img.onload = function(){
          var canvas = <HTMLCanvasElement>document.createElement('canvas');
          var ctx = canvas.getContext('2d');
          canvas.height =  img.height;
          canvas.width =  img.width;
          ctx.drawImage( img, 0, 0);
          var dataURL = canvas.toDataURL('image/jpeg').slice(23);
          Attachments.push(dataURL);  // array for storing base64 equivalent of all images
          canvas = null; 
      };
    }

【问题讨论】：

您的代码是正确的。你确定你得到的 2 张图片的 dataURL 是一样的吗？因为它以相同的字符串'data:image/jpeg;base64,... 开头。我知道要验证的愚蠢的事情，但不介意。如果不同，您可能必须停止循环，直到第一个图像转换为 base64。要查看停止/等待是否有效，请给它一些 UI 控制。例如。尝试在 UI 上设置一个按钮，并在第一次图像转换发生后按下它。而且它的onclick事件会有转换码。你能检查一下它是否有效。此外，在 UI 上的标记中的某处显示该图像。
@SagarKulkarni 是的，我在我的 HTML 中显示了它，它再次显示相同的图像，确认它只为所有图像提供第一个 URI。您的方法可能有效，但这不是我的要求。是否有任何解决方法？
我让你测试一下，如果它有效。所以我们肯定知道一些变量像canvas 或ctx 没有被清除。另外，我刚刚意识到，您能否在Attachments.push(dataURL) 之前添加console.log("DataURL for results index - ",i, " is : ",dataURL);，看看它是相同的URL 还是不同的。
这将显示在执行Attachments.push(dataURL) 时是否存在async 问题。
@SagarKulkarni 已解决。感谢您的帮助

标签： javascript cordova typescript ionic2 cordova-plugins

【解决方案1】：

img.src = results[ i ] 在 results[ i ] async 处开始读取文件，因此当 i=1 循环继续时>，results[1] 未定义，因为文件系统仍在读取 results[0]。因此，所有迭代都返回第一张图片的 dataURL。

为了避免这种情况，请使用 callbacks，它通过 closures 的概念解决了这个问题。

 window.imagePicker.getPictures(
  function(results) {
    console.log(results);
    for (var i = 0; i < results.length; i++) {
     parent.tobase64(results[i],function(dataURL){
        parent.email_data.Attachments.push(dataURL);
     });
    }

  }, function (error) {
    console.log('Error: ' + error);
  }
}

 tobase64(file,callback){
      var parent=this;
      var img = new Image();
      img.crossOrigin = 'Anonymous';
      img.src = file;
      img.onload = function(){
          var canvas = <HTMLCanvasElement>document.createElement('canvas');
          var ctx = canvas.getContext('2d');
          canvas.height =  img.height;
          canvas.width =  img.width;
          ctx.drawImage( img, 0, 0);
          var dataURL = canvas.toDataURL('image/jpeg').slice(23);      
          canvas = null; 
          callback.call(this,dataURL);
      }
}

【讨论】：