Javascript 将图像从cordova imagepicker转换为base64

我正在使用以下代码段进行转换操作（从cordova image picker到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; 
      };
    }

window.imagePicker.getPictures(
职能（结果）{
对于（var i=0；i

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

为了避免这种情况，请使用回调，它使用闭包的概念来解决这个问题

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

window.imagePicker.getPictures(
职能（结果）{
控制台日志（结果）；
对于（var i=0；i

您的代码是正确的。您确定为两个图像获取的dataURL是相同的吗？因为它以相同的字符串开头。

'data:image/jpeg；base64，

。我知道需要验证的是一件愚蠢的事情，但不介意。如果它不同，您可能必须停止循环，直到第一个图像转换为base64。查看是否停止/等待g是否可以工作，给它一些UI控制。例如，尝试在UI上有一个按钮，只有在第一次图像转换发生后才按下。它的onclick事件将有转换代码。你能检查它是否可以工作。另外，在UI上的标记中的某个地方显示该图像。@SagarKulkarni是的，我在HTML中显示了它，并且它再次显示了相同的图像，是的确认它只为所有图像提供第一个URI。您的方法可能有效，但这不是我的要求。是否只有解决方法？我要求您测试一下，如果有效的话。因此我们可以确定，一些变量，如

canvas

或

ctx

没有被清除。另外，我刚刚意识到，您可以吗在

附件之前添加
console.log（“结果索引的DataURL-”，i，“is:”，DataURL）；
。推送（DataURL）

，看看它是相同的URL还是不同的URL。这将显示在执行

附件时是否存在一些
异步
问题。推送（DataURL）

@SagarKulkarni已解决。不过感谢您的帮助