兄弟们好。我现在遇到一个问题就是我选择了四张图片,然后用for循环转成base64,但是我选择了四张却只出一个路径。不知道是为什么呢?不理解这个img.onload到底这是怎么一个意思。为什么头像选择一张没问题。当我选择多张再循环生成base64的时候就不行了呢?
如下是代码。
function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
var dataURL = canvas.toDataURL("image/"+ext);
return dataURL;
}
plus.gallery.pick( function(e){
for(var i in e.files){
console.log(i);
console.log(e.files[i]);
var image = new Image();
image.src = e.files[i];
image.onload = function(){
var base64 = getBase64Image(image);
console.log(base64);
}
}
}, function ( e ) {
console.log( "取消选择图片" );
},{filter:"image",multiple:true,maximum:4,system:false,onmaxed:function(){
plus.nativeUI.alert('最多只能选择4张图片');
}});
1 个回复
猫猫猫猫 - 用户已离线
你的js基础有点薄弱,你虽然有多张图片,但是共用的一个image对象,for循环的中括号并不能产生独立的作用域。当每个image的load事件发生的时候,for循环早跑完了,这时候image.src是最后一个。
帮你改一下,将for循环内代码放匿名函数内,如下: