JavaScript获取页面图片原始尺寸

JavaScript 2013-04-17 图片,尺寸

上周我写了一篇快速获取图片大小的文章,参见《JS快速获取图片宽高的方法》,在那篇文章里所获取的图片大小都是原始尺寸。既然这样,我今天为何还要再写一篇文章介绍如何获取页面上图片原始大小的方法呢?只是有些博友发邮件问我这个问题了,我感觉还是有必要写写。

通过去除样式获取原始大小

在JavaScript中获取页面中图片的大小都是最终样式呈现的大小,比如一张1000px宽的图片你给它设置宽为300px那么JavaScript获取到图片的宽度就是300px。

假如页面有这样一个图片

<img src="http://img.hb.aicdn.com/5682a4bf26a0455a2e3e6b52ae0716b8654bf6811b033-rL3rJM_fw580" width=200 height=300  />

代码:

document.images[0].onload = function(){

	var str = '';
	str += '解除样式前:width:'+this.width+' , height:'+this.height+"\r\n";

	// 解除样式
	this.style.width = 'auto';	
	this.style.height = 'auto';	

	// 获取原始大小
	str += '解除样式后:width:'+this.width+' , height:'+this.height;

	alert(str); 
};

执行:

通过解除样式,我们获取到图片的原始尺寸。

如果页面在给img指定样式的时候加了important,结果还是以important为主,页面代码如下:

<!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8" />
		<title>JS获取图片原始大小</title>
		<style type="text/css">
			img { width:300px !important; height:200px !important; } 
		</style>
	</head>
	<body>
		<img src="http://img.hb.aicdn.com/5682a4bf26a0455a2e3e6b52ae0716b8654bf6811b033-rL3rJM_fw580"  />	
	</body>
</html>

通过style标签控制图片大小,并且加了important,执行结果:

通过执行结果与FireBug解析结果来看,虽然我们给图片宽高定义了auto,但style标签的!important权重覆盖了auto值,所以结果自然都是一样的。

我们可以通过setAttribute函数设置样式权重解决这个问题

代码:

document.images[0].onload = function(){

	var str = '';
	str += '解除样式前:width:'+this.width+' , height:'+this.height+"\r\n";

	// 解除样式
	this.setAttribute('style','width:auto !important;height:auto !important;')	

	// 获取原始大小
	str += '解除样式后:width:'+this.width+' , height:'+this.height;

	alert(str); 
	
};

执行:

这样就解决样式被important的问题,但我们不能为了取图片的原始宽高而改变图片样式的大小,所以我们可以记录一下它的初始宽高,取值后还原!

document.images[0].onload = function(){

	var str = '';
	// 记录原始样式的值
	var default_set = {};	

	default_set.width = this.width;
	default_set.height = this.height;
	default_set.style = this.getAttribute('style');

	str += '解除样式前:width:'+default_set.width+' , height:'+default_set.height+"\r\n";

	// 解除样式
	this.setAttribute('style',default_set.style+';width:auto !important;height:auto !important;');	

	// 获取原始大小
	var Original_size = {};
	Original_size.width = this.width;
	Original_size.height = this.height;

	// 还原默认样式尺寸
	this.setAttribute('style',default_set.style);

	str += '解除样式后:width:'+Original_size.width+' , height:'+Original_size.height;

	alert(str); 
};

执行:

这样就既能取值又不会改变原始样式

通过Image()对象获取原始宽高

这种方式就没有那么麻烦,直接new一个Image()对象,然后把img的src赋值给他即可获取。

var img = new Image();

img.src = document.images[0].src;

if(img.complete){
	getImgOriginalSize.call(img);
	img = null;
}else{
	img.onload=function(){
		getImgOriginalSize.call(img);
		img = null;
	};
}

function getImgOriginalSize(){
	alert('width:'+this.width+',height'+this.height);
}

执行:

并且不要担心new Image对象会多一个http请求,浏览器加载图片后已经有缓存,你new N个image对象都没问题,当然,内存会消耗,所以用完后img置为null。

通过new Image方式获取原始图片大小也可以结合我之前写的快速获取图片大小的方法使用。

文字链接:《JavaScript获取页面图片原始尺寸

文章地址:http://www.qttc.net/201304310.html

除非标注,琼台博客所有博文均为原创,转载请加文字链接注明来源

乳名?小名?昵称?网名?均可

email,放心,我不会给你乱投广告的

想获得回访就把你的站点URL写上(没有留空)

[NOTICE]木要投放广告
[NOTICE]木要骂人,说不该说的话
[NOTICE]自由言论,但要遵纪守法

Comments 0

    Hi,你想第一个做沙发么?