关于图片放大和取得尺寸

原贴地址

实际应用中，我们经常要处理图片的大小，如放大镜效果。一般来说，我们是不推荐用图片轮转的方法动用两张或多张图片，除非图片放得很大导致失真。现在我们讨论一下如何放大图片。

第一种情形，图片的长与高已知，但并非写style里面

 
function enlarge(el) {
	el.width = 300;
	el.height = 240;
}

<script type="text/javascript"> function enlarge(el) { el.width = 300; el.height = 240; } </script> <div><img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_Jcalendar2.jpg" onclick="enlarge(this)" id="x" alt="Click to enlarge" /> </div>

运行代码

改进一下，让其可连续成倍扩大。注意，这里我们利用了IE的私有属性防止图片放大失真严重！

<style type="text/css"> .pic {-ms-interpolation-mode: bicubic} </style> <script type="text/javascript"> function enlarge(el) { el.width *= 2; // Same as el.width = el.width * 2; el.height *= 2; // Same as el.height = el.height * 2; } </script> <div><img class="pic" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_Jcalendar2.jpg" onclick="enlarge(this)" id="x" alt="Click to enlarge" /> </div>

运行代码

我们试图通过style属性试一下

<script type="text/javascript"> function enlarge(el) { el.style.width = parseInt(el.style.width) * 2 + "px"; el.style.height = parseInt(el.style.height) * 2 + "px"; } </script> <div><img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_Jcalendar2.jpg" onclick="enlarge(this)" id="x" alt="Click to enlarge" /> </div>

运行代码

为什么不可以呢？

<script type="text/javascript"> function enlarge(el) { alert(el.style.width); alert(el.style.height); alert(el.width) alert(el.height) } </script> <div><img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_Jcalendar2.jpg" style="padding:3px" onclick="enlarge(this)" id="x" alt="Click to enlarge" /> </div>

运行代码

原来只要我们不在style中显式地设置它，它永远为空！所以我们放大或缩小图片，利用width与height是最保险的，而不是style.width与style.height，它们还要加单位呢！

另外在FF与谷歌中，我们还可以用naturalWidth与naturalHeight取得图片的原大小，但注意它们是只读属性，不能用来设置图片的大小！

<script type="text/javascript"> function enlarge(el) { alert(el.naturalWidth); alert(el.naturalHeight); } </script> <div><img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_Jcalendar2.jpg" onclick="enlarge(this)" id="x" alt="Click to enlarge" /> </div>

运行代码