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 相关文章推荐
javascript 动态生成私有变量访问器
Dec 06 Javascript
javascript图像处理—仿射变换深度理解
Jan 16 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
Jun 17 Javascript
老生常谈javascript变量的命名规范和注释
Sep 29 Javascript
vue双向数据绑定原理探究(附demo)
Jan 17 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
Apr 12 Javascript
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
Jun 29 Javascript
hammer.js实现图片手势放大效果
Aug 29 Javascript
深入理解React高阶组件
Sep 28 Javascript
vue-router history模式下的微信分享小结
Jul 05 Javascript
vue中v-for通过动态绑定class实现触发效果
Dec 06 Javascript
jsonp实现百度下拉框功能的方法分析
May 10 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 set_error_handler()函数使用详解(示例)
2013/11/12 PHP
ThinkPHP Mobile使用方法简明教程
2014/06/18 PHP
php中opendir函数用法实例
2014/11/15 PHP
JavaScript与函数式编程解释
2007/04/27 Javascript
jquery 按键盘上的enter事件
2014/05/11 Javascript
用JavaScript实现使用鼠标画线的示例代码
2014/08/19 Javascript
VS2008中使用JavaScript调用WebServices
2014/12/18 Javascript
jQuery实现返回顶部效果的方法
2015/05/29 Javascript
纯javascript制作日历控件
2015/07/17 Javascript
js生成随机数的过程解析
2015/11/24 Javascript
jQuery实现下拉加载功能实例代码
2016/04/01 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
2016/12/13 Javascript
详解Angular 4.x NgIf 的用法
2017/05/22 Javascript
vue2.0 axios前后端数据处理实例代码
2017/06/30 Javascript
React注册倒计时功能的实现
2018/09/06 Javascript
JS实现二维数组元素的排列组合运算简单示例
2019/01/28 Javascript
详解如何使用nvm管理Node.js多版本
2019/05/06 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
2019/05/31 Javascript
微信小程序学习总结(一)项目创建与目录结构分析
2020/06/04 Javascript
Python实现抓取网页并且解析的实例
2014/09/20 Python
Python解析json文件相关知识学习
2016/03/01 Python
python中关于for循环的碎碎念
2017/06/30 Python
Django1.11配合uni-app发起微信支付的实现
2019/10/12 Python
利用python读取YUV文件 转RGB 8bit/10bit通用
2019/12/09 Python
利用PyQt中的QThread类实现多线程
2020/02/18 Python
浅谈Python __init__.py的作用
2020/10/28 Python
HTML5 Canvas 破碎重组的视频特效的示例代码
2019/09/24 HTML / CSS
HTML5中使用json对象的实例代码
2018/09/10 HTML / CSS
贝斯特韦斯特酒店集团官网:Best Western
2019/01/03 全球购物
OSPREY LONDON官网:英国本土皮具品牌
2019/05/31 全球购物
幼师专业毕业生自荐信
2013/09/29 职场文书
土木工程专业个人求职信
2013/12/05 职场文书
运动会宣传口号
2014/06/09 职场文书
教代会闭幕词
2015/01/28 职场文书
教师创先争优承诺书
2015/04/27 职场文书
2016年精神文明建设先进个人事迹材料
2016/02/29 职场文书