Question

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

编辑：结果[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);
      }
}

将图像从cordova imagepicker转换为base64

1 个答案: