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 相关文章推荐
jQuery获取文本节点之 text()/val()/html() 方法区别
Mar 01 Javascript
加载 Javascript 最佳实践
Oct 30 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
Apr 17 Javascript
js图片延迟加载的实现方法及思路
Jul 22 Javascript
页面装载js及性能分析方法介绍
Mar 21 Javascript
jQuery响应enter键的实现思路
Apr 18 Javascript
js与jquery回车提交的方法
Feb 03 Javascript
JS设置cookie、读取cookie
Feb 24 Javascript
JS 全屏和退出全屏详解及实例代码
Nov 07 Javascript
微信小程序block的使用教程
Apr 01 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
Dec 04 Javascript
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 Vue.js
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字符串分割函数explode的实例代码
2013/02/07 PHP
使用array_map简单搞定PHP删除文件、删除目录
2014/10/29 PHP
UPUPW 更新 64 位 Apache 系列 PHP 7.0 正式版
2015/12/08 PHP
php如何获取Http请求
2020/04/30 PHP
Js callBack 返回前一页的js方法
2008/11/30 Javascript
Javascript合并表格中具有相同内容单元格示例
2013/08/11 Javascript
jquery.post用法示例代码
2014/01/03 Javascript
Javascript 按位左移运算符使用介绍(
2014/02/04 Javascript
coffeescript使用的方式汇总
2015/08/05 Javascript
跟我学习javascript的基本类型和引用类型
2015/11/16 Javascript
BootStrap制作导航条实例代码
2016/05/06 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
2016/05/15 Javascript
node.js基于mongodb的搜索分页示例
2017/01/22 Javascript
AngularJS中$http使用的简单介绍
2017/03/17 Javascript
[03:17]2014DOTA2 国际邀请赛中国区预选赛 四强专访
2014/05/23 DOTA
[01:10:57]Liquid vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Centos7 Python3下安装scrapy的详细步骤
2018/03/15 Python
PyQt5 pyqt多线程操作入门
2018/05/05 Python
Python 模拟生成动态产生验证码图片的方法
2020/02/01 Python
Python文本文件的合并操作方法代码实例
2020/03/31 Python
Keras构建神经网络踩坑(解决model.predict预测值全为0.0的问题)
2020/07/07 Python
Python爬虫开发与项目实战
2020/12/16 Python
HTML5 预加载让页面得以快速呈现
2013/08/13 HTML / CSS
移动端html5 meta标签的神奇功效
2016/01/06 HTML / CSS
英格兰足协官方商店:England Store
2019/07/12 全球购物
爱尔兰橄榄球店:Irish Rugby Store
2019/12/05 全球购物
武汉世纪畅想数字传播有限公司.NET笔试题
2014/07/22 面试题
Linux内核的同步机制是什么?主要有哪几种内核锁
2013/01/03 面试题
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2012/04/17 面试题
党员学习十八大感想
2014/01/17 职场文书
大班开学家长寄语
2014/04/04 职场文书
网络工程专业大学生求职信
2014/10/01 职场文书
发展党员工作情况汇报
2014/10/28 职场文书
党员学习群众路线心得体会
2014/11/04 职场文书
素质教育学习心得体会
2016/01/19 职场文书
你有一份《诚信考试承诺书》待领取
2019/11/13 职场文书