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模仿msgbox提示效果代码
Jun 10 Javascript
基于jQuery实现自动轮播旋转木马特效
Nov 02 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
May 17 Javascript
省市区三级联动jquery实现代码
Apr 15 Javascript
bootstrap网格系统使用方法解析
Jan 13 Javascript
vue-router实现tab标签页(单页面)详解
Oct 17 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
Jan 08 Javascript
Django+Vue跨域环境配置详解
Jul 06 Javascript
一文快速了解JQuery中的AJAX
May 31 jQuery
Javascript操作select控件代码实例
Feb 14 Javascript
Vue elementui字体图标显示问题解决方案
Aug 18 Javascript
微信小程序实现轮播图指示器
Jun 25 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 nl2br函数 将换行字符转成 &amp;lt;br&amp;gt;
2009/08/21 PHP
基于php设计模式中单例模式的应用分析
2013/05/15 PHP
laravel容器延迟加载以及auth扩展详解
2015/03/02 PHP
Yii使用技巧大汇总
2015/12/29 PHP
php+webSoket实现聊天室示例代码(附源码)
2017/02/17 PHP
PHP+mysql实现的三级联动菜单功能示例
2019/02/15 PHP
php ajax confirm 删除实例详解
2019/03/06 PHP
基于Jquery的简单图片切换效果
2011/01/06 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
2012/05/23 Javascript
js将iframe中控件的值传到主页面控件中的实现方法
2013/03/11 Javascript
window.location的重写及判断location是否被重写
2014/09/04 Javascript
JavaScript DOM操作表格及样式
2015/04/13 Javascript
jQuery使用方法
2017/02/04 Javascript
Angular4 ElementRef的应用
2018/02/26 Javascript
深入浅析Node环境和浏览器的区别
2018/08/14 Javascript
vue cli安装使用less的教程详解
2019/07/12 Javascript
微信小程序 this.triggerEvent()的具体使用
2019/12/10 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
2020/01/07 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
2020/05/18 Javascript
TensorFlow平台下Python实现神经网络
2018/03/10 Python
python读取几个G的csv文件方法
2019/01/07 Python
Django Python 获取请求头信息Content-Range的方法
2019/08/06 Python
django序列化serializers过程解析
2019/12/14 Python
python 函数嵌套及多函数共同运行知识点讲解
2020/03/03 Python
Python图像阈值化处理及算法比对实例解析
2020/06/19 Python
django inspectdb 操作已有数据库数据的使用步骤
2021/02/07 Python
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
电大自我鉴定
2013/10/27 职场文书
高中数学教师求职信
2013/10/30 职场文书
应征英语教师求职信
2013/11/27 职场文书
初中政治教学反思
2014/01/17 职场文书
军训 自我鉴定
2014/02/03 职场文书
模特大赛策划方案
2014/05/28 职场文书
村创先争优活动总结
2014/08/28 职场文书
雷锋的观后感
2015/06/10 职场文书
2015大学迎新晚会策划书
2015/07/16 职场文书