想实现利用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节点?
相关分类