微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > js教程 > 正文

javascript 获取图片尺寸及放大图片_javascript技巧

php中文网
发布： 2016-05-16 17:23:32
原创
1521人浏览过
1)获取图片尺寸
复制代码 代码如下:

MM
<script> <BR>function getWH(t){ <BR>//DOM属性 <BR>console.log("width="+t.width);//200 <BR>console.log("height="+t.height);//300 <BR>//操作样式 <BR>console.log("styleWidth="+t.style.width);//空 <BR>console.log("styleHeight="+t.style.height);//空 <BR>} <BR></script>

2)获取图片尺寸(不设置宽高)
复制代码 代码如下:

MM
<script> <BR>function getWH(t){ <BR>//DOM属性 <BR>console.log("width="+t.width);//200 <BR>console.log("height="+t.height);//300 <BR>//操作样式 <BR>console.log("styleWidth="+t.style.width);//空 <BR>console.log("styleHeight="+t.style.height);//空 <BR>} <BR></script>

我们只要不在style中显式地设置它，宽高永远为空！

3)放大图片：

这里我们利用了IE的私有属性防止图片放大失真严重！
复制代码 代码如下:

MM
<script> <BR>function getWH(t){ <BR>t.width *= 2; <BR>t.height *= 2; <BR>//每点击一次，宽高放大一倍 <BR>} <BR></script>

4)在FF与谷歌中，我们还可以用naturalWidth与naturalHeight取得图片的原大小！
复制代码 代码如下:

MM
<script> <BR>function getWH(t){ <BR>console.log("width="+t.naturalWidth); <BR>console.log("height="+t.naturalHeight); <BR>t.width = t.naturalWidth * 2; <BR>t.height = t.naturalHeight * 2; <BR>} <BR></script>

naturalWidth和naturalHeight只是只读属性，不能用来设置图片的大小，不能持续放大。
javascript 获取图片尺寸及放大图片_javascript技巧

大家都在看：

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：js 窗口抖动示例_javascript技巧 下一篇：js格式化货币数据实现代码_javascript技巧
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
React Router v6 中组件传参的完整指南 本文旨在详细阐述ReactRouterv6中如何正确传递参数。我们将深入探讨Route组件的element属性的正确用法，以及如何利用ReactRouterv6提供的各种Hooks来替代v5版本中的路由特定props（如history、location和match），从而实现灵活且高效的组件间数据传递。
2025-11-22 12:34:38
305
JavaScript教程：如何将逗号分隔的数字字符串相乘并聚合 本教程详细介绍了如何使用JavaScript处理逗号分隔的数字字符串或数字数组，并将其中的所有数字相乘得到一个总结果。文章重点讲解了split()方法将字符串转换为数组，以及reduce()方法对数组元素进行累积乘法运算的实现细节和最佳实践，旨在提供清晰、专业的解决方案。
2025-11-22 12:32:51
573
JavaScript压缩技术_代码压缩与混淆 JavaScript压缩通过去除冗余字符、简化表达式和缩短变量名减小文件体积，提升加载速度；混淆则进一步重命名变量函数、扁平化控制流、加密字符串并插入无效代码，增强代码安全性。常用工具包括Terser、JavaScriptObfuscator等，建议开发保留源码，部署时压缩混淆，并避免上传sourcemap。
2025-11-22 12:22:02
632
Angular组件CSS样式隔离：理解与应用ViewEncapsulation 在Angular开发中，为确保组件样式仅作用于当前组件而不影响全局，关键在于正确配置视图封装模式。本文将深入探讨Angular的ViewEncapsulation机制，特别是默认的Emulated模式，解释其如何通过模拟ShadowDOM实现样式隔离，并指导开发者避免使用ViewEncapsulation.None和不必要的!important，从而维护组件样式的独立性与可维护性。
2025-11-22 12:21:03
938
解决React中“同一key的两个子元素”警告：深入理解与实践 在React开发中，当渲染列表时，遇到“Encounteredtwochildrenwiththesamekey”警告是一个常见问题。本文将深入探讨Reactkey属性的作用、为何会出现重复key的警告，以及如何通过正确使用唯一且稳定的标识符来解决这一问题。我们将重点分析即使使用数据ID作为key仍出现问题的原因，并提供诊断与优化建议，确保组件在更新时的正确性和性能。
2025-11-22 12:09:12
276
解决CSS display: none与transform动画冲突的策略 当尝试对使用display:none隐藏的元素应用CSStransform动画时，动画通常无法正常工作，因为浏览器在应用display:block后会一次性渲染所有样式。要解决此问题，需要在设置display:block后，使用setTimeout引入短暂延迟，让浏览器有机会渲染元素，然后再应用transform样式，从而确保动画平滑执行。对于隐藏元素，则应在transform动画完成后再设置display:none。
2025-11-22 12:02:02
140
Vue 3 v-model 高级实践：掌握父子组件数据同步与响应式重置的技巧 本文深入探讨Vue3中v-model在父子组件间数据同步与重置时的常见问题及最佳实践。重点解析了父组件响应式数据重置的正确姿势、子组件v-model属性的响应式维护方法，以及类型安全和输入处理的优化策略，旨在帮助开发者构建更健壮、高效的Vue应用。
2025-11-22 11:55:19
185
JavaScript浏览器API_DOM操作性能最佳实践 减少重排与重绘，避免循环中读写样式属性，通过切换CSS类批量修改样式，并将元素脱离文档流操作；2.使用DocumentFragment批量插入节点，仅触发一次渲染；3.利用事件委托在父级处理子元素事件，降低内存消耗；4.缓存DOM查询结果，避免重复查找，防止内存泄漏；合理组织DOM操作可显著提升页面性能。
2025-11-22 11:53:30
616
JavaScript图形绘制_Canvas高级动画技术 Canvas通过2D上下文实现高效绘图，利用requestAnimationFrame构建流畅动画循环，结合坐标变换与粒子系统可实现复杂动态效果。
2025-11-22 11:47:02
495
使用 jQuery 实现多文件（图片与PDF）上传预览及删除功能 本教程详细介绍了如何利用jQuery在前端实现一个功能完善的多文件上传组件。该组件支持同时上传图片和PDF文件，并提供即时预览功能及便捷的删除操作。我们将从HTML结构、CSS样式到核心JavaScript逻辑进行全面讲解，旨在帮助开发者构建用户友好的文件上传界面。
2025-11-22 11:42:16
125
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部