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节点?


不负相思意
浏览 455回答 1
1回答
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript