将图像从科尔多瓦图像选择器转换为 base64

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 ] 异步时开始读取文件，因此当循环继续i=1时，结果 [1 ] 未定义，因为文件系统仍在读取结果 [0]。因此，所有迭代都返回第一个图像的数据URL。

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

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