张明
张明
  • 发布:2016-11-18 16:55
  • 更新:2016-11-19 13:11
  • 阅读:2467

选择多张图片转BASE64位的问题

分类:MUI

兄弟们好。我现在遇到一个问题就是我选择了四张图片,然后用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张图片');  
        }}); 
2016-11-18 16:55 负责人:无 分享
已邀请:
猫猫猫猫

猫猫猫猫 - 用户已离线

你的js基础有点薄弱,你虽然有多张图片,但是共用的一个image对象,for循环的中括号并不能产生独立的作用域。当每个image的load事件发生的时候,for循环早跑完了,这时候image.src是最后一个。
帮你改一下,将for循环内代码放匿名函数内,如下:

console.log(i);  
console.log(e.files[i]);  
(function(){  
    var image = new Image();  
    image.src = e.files[i];  
    image.onload = function(){  
        var base64 = getBase64Image(image);  
        console.log(base64);  
     }  
})()

该问题目前已经被锁定, 无法添加新回复