javascript 获取图片尺寸及放大图片


Posted in Javascript onSeptember 04, 2013

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只是只读属性,不能用来设置图片的大小,不能持续放大。
javascript 获取图片尺寸及放大图片
Javascript 相关文章推荐
有关js的变量作用域和this指针的讨论
Dec 16 Javascript
javascript 3d 逐侦产品展示(核心精简)
Mar 26 Javascript
javascript进行数组追加方法小结
Jun 16 Javascript
javascript 动态创建表格
Jan 08 Javascript
Javascript实现Web颜色值转换
Feb 05 Javascript
基于jQuery日历插件制作日历
Mar 11 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
Oct 10 Javascript
微信小程序商城项目之侧栏分类效果(1)
Apr 17 Javascript
JavaScrip关于创建常量的知识点
Dec 07 Javascript
JS实现提示效果弹出及延迟隐藏的功能
Aug 26 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
Sep 06 Javascript
Node.js API详解之 dns模块用法实例分析
May 15 Javascript
jQuery遍历Form示例代码
Sep 03 #Javascript
JS将秒换成时分秒实现代码
Sep 03 #Javascript
js导出table到excel同时兼容FF和IE示例
Sep 03 #Javascript
js综合应用实例简单的表格统计
Sep 03 #Javascript
js关闭浏览器窗口及检查浏览器关闭事件
Sep 03 #Javascript
快速查找数组中的某个元素并返回下标示例
Sep 03 #Javascript
iframe的父子窗口之间的对象相互调用基本用法
Sep 03 #Javascript
You might like
PHP文件注释标记及规范小结
2012/04/01 PHP
基于MySQL到MongoDB简易对照表的详解
2013/06/03 PHP
分享五个PHP7性能优化提升技巧
2015/12/07 PHP
ThinkPHP项目分组配置方法分析
2016/03/23 PHP
PHP中include()与require()的区别说明
2017/02/14 PHP
php及codeigniter使用session-cookie的方法(详解)
2017/04/06 PHP
YII框架中使用memcache的方法详解
2017/08/02 PHP
use jscript List Installed Software
2007/06/11 Javascript
实现连缀调用的map方法(prototype)
2009/08/05 Javascript
七个很有意思的PHP函数
2014/05/12 Javascript
node.js中的fs.utimes方法使用说明
2014/12/15 Javascript
使用jQuery实现返回顶部
2015/01/26 Javascript
.NET微信公众号开发之创建自定义菜单
2015/07/16 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
2015/11/04 Javascript
AngularJS ng-style中使用filter
2016/09/21 Javascript
js控制按钮,防止频繁点击响应的实例
2017/02/15 Javascript
BootstrapTable refresh 方法使用实例简单介绍
2017/02/20 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
2017/03/23 jQuery
使用angularjs.foreach时return的问题解决
2018/09/30 Javascript
解决百度Echarts图表坐标轴越界的方法
2018/10/17 Javascript
详解Vue底部导航栏组件
2019/05/02 Javascript
Flask之flask-session的具体使用
2018/07/26 Python
python使用for...else跳出双层嵌套循环的方法实例
2020/05/17 Python
python接口自动化框架实战
2020/12/23 Python
利用CSS3实现圆角的outline效果的教程
2015/06/05 HTML / CSS
基于HTML5的WebSocket的实例代码
2018/08/15 HTML / CSS
设计师珠宝:Ylang 23
2018/05/11 全球购物
c语言常见笔试题总结
2016/09/05 面试题
采用怎样的方法保证数据的完整性
2013/12/02 面试题
个人欠款担保书
2014/05/20 职场文书
自习课吵闹检讨书范文
2014/09/26 职场文书
2014年乡镇工会工作总结
2014/12/02 职场文书
护士2015年终工作总结
2015/04/29 职场文书
《藏戏》教学反思
2016/02/23 职场文书
Spring依赖注入多种类型数据的示例代码
2022/03/31 Java/Android
Go 内联优化让程序员爱不释手
2022/06/21 Golang