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 自定义函数缺省值的设置方法
May 05 Javascript
深入探寻javascript定时器
Jan 02 Javascript
js代码验证手机号码和电话号码是否合法
Jul 30 Javascript
原生JS实现图片轮播与淡入效果的简单实例
Aug 21 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
Dec 06 Javascript
微信小程序三级联动地址选择器的实例代码
Jul 12 Javascript
Node中使用ES6语法的基础教程
Jan 05 Javascript
Vue中render函数的使用方法
Jan 31 Javascript
Vue不能观察到数组length的变化
Jun 08 Javascript
微信小程序的授权实现过程解析
Aug 02 Javascript
uni-app如何实现增量更新功能
Jan 03 Javascript
JavaScript实现PC端四格密码输入框功能
Feb 19 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
粗略计算在线时间,bug:ip相同
2006/12/09 PHP
php 过滤器实现代码
2010/08/09 PHP
php session的锁和并发
2016/01/22 PHP
Yii中的cookie的发送和读取
2016/07/27 PHP
PHP 7.0新增加的特性介绍
2017/06/08 PHP
js中格式化日期时间型数据函数代码
2010/11/08 Javascript
JQuery中根据属性或属性值获得元素(6种情况获取方法)
2013/01/17 Javascript
JQuery Highcharts 动态生成图表的方法
2013/11/15 Javascript
javascript创建createXmlHttpRequest对象示例代码
2014/02/10 Javascript
JavaScript AOP编程实例
2015/06/16 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
2015/09/10 Javascript
javascript类型系统_正则表达式RegExp类型详解
2016/06/24 Javascript
微信小程序 动态绑定事件并实现事件修改样式
2017/04/13 Javascript
详解vue-cli + webpack 多页面实例应用
2017/04/25 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
2017/10/25 Javascript
简单的Vue SSR的示例代码
2018/01/12 Javascript
Vue 动态设置路由参数的案例分析
2018/04/24 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
2018/05/29 Javascript
vue.js实现的幻灯片功能示例
2019/01/18 Javascript
解决vue中el-tab-pane切换的问题
2020/07/19 Javascript
jQuery实现鼠标拖拽登录框移动效果
2020/09/13 jQuery
[01:19:11]Ti4 循环赛第二日 NaVi.us vs iG
2014/07/11 DOTA
Python单链表的简单实现方法
2014/09/23 Python
django模板语法学习之include示例详解
2017/12/17 Python
浅谈django model postgres的json字段编码问题
2018/01/05 Python
使用python批量转换文件编码为UTF-8的实现
2020/04/03 Python
PyCharm最新激活码(2020/10/27全网最新)
2020/10/27 Python
html5文字阴影效果text-shadow使用示例
2013/07/25 HTML / CSS
传统软件工程与面向对象的软件工程有什么区别
2012/05/31 面试题
中专毕业个人的自荐信格式
2013/09/21 职场文书
销售员个人求职的自我评价
2014/02/10 职场文书
上班时间打瞌睡检讨书
2014/09/26 职场文书
车间质检员岗位职责
2015/04/08 职场文书
优秀班干部主要事迹材料
2015/11/04 职场文书
三年级作文之趣事作文
2019/11/04 职场文书
详解Spring Security如何在权限中使用通配符
2022/06/28 Java/Android