欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

jQuery有没有获取<img>图片实际尺寸的方法? 就是图片文件的实际尺寸,而不是添加了css样式之后的尺寸。

4 个回答

// 20150911 更新
这里有个更好的版本 jquery - Get real image width and height with JavaScript in Safari/Chrome?
= = = = = = = = == = =
非要用jQuery的话也不是不行

$(function(){
	var imgSrc = $("#image").attr("src");
	getImageWidth(imgSrc,function(w,h){
		console.log({width:w,height:h});
	});
});

function getImageWidth(url,callback){
	var img = new Image();
	img.src = url;
	
	// 如果图片被缓存,则直接返回缓存数据
	if(img.complete){
	    callback(img.width, img.height);
	}else{
            // 完全加载完毕的事件
	    img.onload = function(){
		callback(img.width, img.height);
	    }
        }
	
}
可以很明确的说,js无法得知没有标示的img标签的原图的图片大小。即使是onload完后得到的也只是图片的显示大小而已,所以你在保存图片的时候就需要把原图的大小写到img标签上,比如知乎的原图规则:
<img src="http://pic3.zhimg.com/45e64ea2f624418ab0ce2aad95bf6762_xld.jpg" data-rawwidth="572" data-rawheight="225" class="origin_image inline-img zh-lightbox-thumb" data-original="http://pic3.zhimg.com/45e64ea2f624418ab0ce2aad95bf6762_r.jpg">
其中data-rawwidth和data-rawheigth就是原图的原始宽高,但是这个数据是在用户提交表单时由后台程序分析图片的数据流得出的。

来自  https://www.zhihu.com/question/28733200

普通分类: