Js获取图片原始宽高

来自用户上传的图片很多时候服务端都不记录图片的尺寸信息,而我们又需要对图片做一些比如裁剪等操作的时候,就涉及到需要获取图片的真实宽高。

废话不说了,直接上代码:

原生 Js 版本

1
2
3
4
5
6
7
8
function getImageSizeOf(src, thenFn){
var _img = document.createElement('img');
_img.addEventListener('load', function(){
console.log(this.width, this.height)
typeof thenFn === 'function' && thenFn(this.width, this.height)
});
_img.src = src;
}

jQuery 版本

当然,上述代码只是一个简单实现,说明具体思路而已,可能会有不兼容部分浏览器的问题,如果你使用 jQuery ,也可以直接使用下面这个基于 jQuery ,兼容性更好的版本:

1
2
3
4
5
6
function getImageSizeOf(src, thenFn){
$("<img>").attr("src", src).load(function(){
console.log(this.width, this.height)
typeof thenFn === 'function' && thenFn(this.width, this.height)
});
}

Proudly powered by Hexo and Theme by Hacker
© 2018 Riant