Question

我正在上传图片，我希望该图片的base64数据。我正在尝试下面的代码，将图像数据作为base64。

1) function getImage(file,count) //file is files[i] of input:file passed from for()
{
if(file)
{            
    var reader = new FileReader();
    reader.onload = function(event)
    {
        var data = event.target.result;
        var image = document.createElement("img");
        image.id = 'img'+count;
        image.class = 'edit';
        image.src = data;             
        console.log('width:'+this.width);//not working value is undefined
        console.log('height:'+this.height);//not working value is undefined
        //image.title = 'click to edit';
        image.data = count;
        data = image.dataset;
        data.ref=count;
        document.getElementById('image'+count).appendChild(image); 
        jQuery(document.getElementById('image'+count)).removeClass('disable');
        jQuery(document.getElementById('img'+count)).addClass('action editable img ');
    }
    reader.readAsDataURL(file);
}
}

这很好用，它会创建一个图像加载正确的img标记。

但是我想在创建img元素之前知道图像的宽度和高度，所以我尝试了下面的代码，

2) function getImage(file,count)
{
if(file)
{            
    var reader = new FileReader();
    reader.onload = function(event)
    {
        var img = new Image(); 
        var data = event.target.result;
        img.onload = function(){
            console.log(img.width);
            var image = document.createElement("img");
            image.id = 'img'+count;
            image.class = 'edit'; 
            image.src = data;         
            console.log('width:'+this.width);
            console.log('height:'+this.height);
            image.data = count;
            data = image.dataset;
            data.ref=count;
            document.getElementById('image'+count).appendChild(image); 
            jQuery(document.getElementById('image'+count)).removeClass('disable');
            jQuery(document.getElementById('img'+count)).addClass('action editable img ');
        };
    }
    reader.readAsDataURL(file);
}
}

但是第二个代码没有打印日志，并且没有创建img标签。那么问题是什么？我的代码有什么问题？有没有更好的方法来实现这个目标？。

Answer 1

只是单行使我的问题为null，感谢this。

function getImage(file,count)
{
if(file)
{            
    var reader = new FileReader();
    reader.onload = function(event)
    {
        var img = new Image(); 
        var data = event.target.result;
        img.src = data; //this line solved my problem..
        img.onload = function(){
            var image = document.createElement("img");
            image.id = 'img'+count;
            image.class = 'edit'; 
            image.src = data;         
            console.log('width:'+this.width);
            console.log('height:'+this.height);
            image.data = count;
            data = image.dataset;
            data.ref=count;
            document.getElementById('image'+count).appendChild(image); 
            jQuery(document.getElementById('image'+count)).removeClass('disable');
            jQuery(document.getElementById('img'+count)).addClass('action editable img ');
        };
    }
    reader.readAsDataURL(file);
}
}

等待更好的答案..

无法从base64数据获取图像宽度和高度属性

1 个答案: