zoukankan      html  css  js  c++  java
  • Tips:javascript 图片放大和取得尺寸

    1)获取图片尺寸

    <img src="http://img.my.csdn.net/uploads/201309/03/1378223257_7957.jpg" alt="MM" title="MM(实际大小200*300)" onclick="getWH(this)" width="200" height="300"/>
    <script>
    function getWH(t){
    	//DOM属性
    	console.log("width="+t.width);//200
    	console.log("height="+t.height);//300
    	//操作样式
    	console.log("styleWidth="+t.style.width);//空
    	console.log("styleHeight="+t.style.height);//空
    }


    2)获取图片尺寸(不设置宽高)

    <img src="http://img.my.csdn.net/uploads/201309/03/1378223257_7957.jpg" alt="MM" title="MM(实际大小200*300)" onclick="getWH(this)"/>
    <script>
    function getWH(t){
    	//DOM属性
    	console.log("width="+t.width);//200
    	console.log("height="+t.height);//300
    	//操作样式
    	console.log("styleWidth="+t.style.width);//空
    	console.log("styleHeight="+t.style.height);//空
    }


    我们只要不在style中显式地设置它,宽高永远为空!

    3)放大图片:

    这里我们利用了IE的私有属性防止图片放大失真严重!@司徒正美

    <img src="http://img.my.csdn.net/uploads/201309/03/1378223257_7957.jpg" alt="MM" title="MM(实际大小200*300)" onclick="getWH(this)" width="200" height="300"/>
    <script>
    function getWH(t){
    	t.width *= 2;
    	t.height *= 2;
    	//每点击一次,宽高放大一倍
    }
    </script>
    


    4)在FF与谷歌中,我们还可以用naturalWidth与naturalHeight取得图片的原大小!

    <img src="http://img.my.csdn.net/uploads/201309/03/1378223257_7957.jpg" alt="MM" title="MM(实际大小200*300)" onclick="getWH(this)" width="200" height="300"/>
    <script>
    function getWH(t){
    	console.log("width="+t.naturalWidth);
    	console.log("height="+t.naturalHeight);
    	t.width = t.naturalWidth * 2;
    	t.height = t.naturalHeight * 2;
    }
    </script>


    naturalWidth和naturalHeight只是只读属性,不能用来设置图片的大小,不能持续放大。

    附:MM.jpg  http://img.my.csdn.net/uploads/201309/03/1378223257_7957.jpg

  • 相关阅读:
    LOJ 6089 小Y的背包计数问题 —— 前缀和优化DP
    洛谷 P1969 积木大赛 —— 水题
    洛谷 P1965 转圈游戏 —— 快速幂
    洛谷 P1970 花匠 —— DP
    洛谷 P1966 火柴排队 —— 思路
    51Nod 1450 闯关游戏 —— 期望DP
    洛谷 P2312 & bzoj 3751 解方程 —— 取模
    洛谷 P1351 联合权值 —— 树形DP
    NOIP2007 树网的核
    平面最近点对(加强版)
  • 原文地址:https://www.cnblogs.com/suncoolcat/p/3301552.html
Copyright © 2011-2022 走看看