javascript - 将图像从 cordova imagepicker 转换为 base64

Question

我正在使用以下代码片段进行转换操作(将图像从 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; 
      };
    }

Answer 1

img.src = results[ i ] 从 results[ i ] async 开始读取文件，因此当循环继续 i=1 时>，结果[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);
      }
}