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插入动态样式实现代码
Feb 22 Javascript
js异常捕获方法介绍
Apr 10 Javascript
JavaScript中window、doucment、body的解释
Aug 14 Javascript
jquery弹出框的用法示例(2)
Aug 26 Javascript
当达到输入长度时表单自动切换焦点
Apr 06 Javascript
director.js实现前端路由使用实例
Feb 03 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
Sep 19 Javascript
jquery 表单验证之通过 class验证表单不为空
Nov 02 Javascript
AngularJS实现表单元素值绑定操作示例
Oct 11 Javascript
在vue中利用v-html按分号将文本换行的例子
Nov 14 Javascript
如何HttpServletRequest文件对象并储存
Aug 14 Javascript
Vue 修改网站图标的方法
Dec 31 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简单随机字符串生成方法示例
2017/04/19 PHP
PHP判断是否是微信打开,浏览器打开的方法
2018/03/14 PHP
Laravel框架在本地虚拟机快速安装的方法详解
2018/06/11 PHP
thinkphp5.1框架容器与依赖注入实例分析
2019/07/23 PHP
会自动逐行上升的文本框
2006/06/30 Javascript
JS获取后台Cookies值的小例子
2013/03/04 Javascript
Jquery.Form 异步提交表单的简单实例
2014/03/03 Javascript
JS实现完全语义化的网页选项卡效果代码
2015/09/15 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
2016/03/11 Javascript
Bootstrap CDN和本地化环境搭建
2016/10/26 Javascript
jQuery grep()方法详解及实例代码
2016/10/30 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
2017/03/14 Javascript
基于JS脚本语言的基础语法详解
2017/07/22 Javascript
在vue中,v-for的索引index在html中的使用方法
2018/03/06 Javascript
详解Vue webapp项目通过HBulider打包原生APP
2018/06/29 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
2018/08/24 Javascript
Vue 样式绑定的实现方法
2019/01/15 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
2019/12/18 Javascript
js实现踩五彩块游戏
2020/02/08 Javascript
使用BeautifulSoup爬虫程序获取百度搜索结果的标题和url示例
2014/01/19 Python
Python实现针对给定单链表删除指定节点的方法
2018/04/12 Python
python使用openpyxl库修改excel表格数据方法
2018/05/03 Python
python实现计数排序与桶排序实例代码
2019/03/28 Python
TensorFlow学习之分布式的TensorFlow运行环境
2020/02/05 Python
pytorch实现MNIST手写体识别
2020/02/14 Python
一套Delphi的笔试题二
2013/05/11 面试题
英语专业毕业个人求职自荐信
2013/09/21 职场文书
电大自我鉴定范文
2013/10/01 职场文书
个人求职简历的自我评价
2013/10/19 职场文书
关于逃课的检讨书
2014/01/23 职场文书
服装采购员岗位职责
2014/03/15 职场文书
春节超市活动方案
2014/08/14 职场文书
四风自我剖析材料
2014/09/30 职场文书
高中生逃课检讨书
2014/10/10 职场文书
机关工会工作总结2015
2015/05/26 职场文书
离职告别感言
2015/08/04 职场文书