javascript - input动态添加图片文件，如何保证图片加载到页面后获取尺寸

问题描述

问 题

想实现利用canvas实现类似cropper截图功能，在实际中发现图片动态加载到页面，无法获取其尺寸的问题，代码如下：

function submitImg(){
    var $originImg=$('.originImg');
    var $input=$('<input>/').attr({'type':'file'}).css({'display':'none'}).appendTo($('body'));
    $input.on('change',function(){
        console.log(this.files[0]);
        var file=this.files[0];

        //判断文件类型是否为图片
        if(!/image/.test(file.type)){
            alert('请选择图片');
            return;
        }
        var reader=new FileReader();
        reader.onload=function(e){    
            console.log($originImg.width());    //0
        }
        reader.readAsDataURL(file);

    })

    $input.click();
}

在reader.onload函数中将图片文件转换成base64,然后加载到页面中，

$originImg.attr('src',e.target.result);

页面中可以显示图片，但无法获取到图片的尺寸，若在页面中打印，也可以获取图片的尺寸，该如何处理？
附：js中有没类似Vue.nextTick()方法更新DOM节点？

解决方案

需要在reader的load事件里监听ImgDOM的load事件。等FileReader读取完成，然后图片加载完成即可

这篇关于javascript - input动态添加图片文件，如何保证图片加载到页面后获取尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！