JS等比例缩小图片尺寸的实例


Posted in Javascript onFebruary 27, 2013

为了提升用户体验,网站用户在上传图片的时候,我们不能够让用户自己去处理图片以达到我们的要求。

而通常像淘宝上商品实物展示这样的页面,我们需要控制的主要是图片的宽度。

又考虑到html页面解析顺序可能导致的一些问题,决定通过定义一个简单的功能函数,然后在img元素中添加onload事件来调用的方式进行实现,代码如下:

JS部分

<script type="text/javascript">
 function changeImg(objImg)
 {
     var most = 690;        //设置最大宽度
     if(objImg.width > most)
     {
         var scaling = 1-(objImg.width-most)/objImg.width;    
         //计算缩小比例
         objImg.width = objImg.width*scaling;
         objImg.height = objImg.height;            //img元素没有设置高度时将自动等比例缩小         //objImg.height = objImg.height*scaling;    //img元素设置高度时需进行等比例缩小
     }
 }
 </script>

HTML调用部分

 <img src="" onload="changeImg(this);" />
Javascript 相关文章推荐
从Ajax到JQuery Ajax学习
Feb 14 Javascript
js实现一个省市区三级联动选择框代码分享
Mar 06 Javascript
javascript模拟地球旋转效果代码实例
Dec 02 Javascript
node.js中的http.response.setHeader方法使用说明
Dec 14 Javascript
基于JavaScript如何制作遮罩层对话框
Jan 26 Javascript
老生常谈 关于JavaScript的类的继承
Jun 24 Javascript
省市二级联动小案例讲解
Jul 24 Javascript
vue2.0构建单页应用最佳实战
Apr 01 Javascript
vue.js中过滤器的使用教程
Jun 08 Javascript
JS实现批量上传文件并显示进度功能
Jun 27 Javascript
layui表格数据重载
Jul 27 Javascript
详解ES6 Promise的生命周期和创建
Aug 18 Javascript
JQuery切换显示的效果实例代码
Feb 27 #Javascript
innerText和textContent对比及使用介绍
Feb 27 #Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
Feb 26 #Javascript
jQuery easyui datagrid动态查询数据实例讲解
Feb 26 #Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
Feb 26 #Javascript
jquery创建一个ajax关键词数据搜索实现思路
Feb 26 #Javascript
jQuery创建平滑的页面滚动(顶部或底部)
Feb 26 #Javascript
You might like
亚洲咖啡有什么?亚洲咖啡产地介绍 亚洲咖啡有什么特点?
2021/03/05 新手入门
PHP 开源AJAX框架14种
2009/08/24 PHP
php Smarty date_format [格式化时间日期]
2010/03/15 PHP
php随机输出名人名言的代码
2012/10/07 PHP
初识Laravel
2014/10/30 PHP
PHP SPL标准库之文件操作(SplFileInfo和SplFileObject)实例
2015/05/11 PHP
解决PHP curl或file_get_contents下载图片损坏或无法打开的问题
2019/10/11 PHP
PHP网页缓存技术优点及代码实例
2020/07/29 PHP
JQuery 国际象棋棋盘 实现代码
2009/06/26 Javascript
JS 树形递归实例代码
2010/05/18 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
2011/09/29 Javascript
brook javascript框架介绍
2011/10/10 Javascript
如何设置一定时间内只能发送一次请求
2014/02/28 Javascript
不用一句js代码初始化组件
2016/01/27 Javascript
基于javascript实现的快速排序
2016/12/02 Javascript
详细AngularJs4的图片剪裁组件的实例
2017/07/12 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
2017/08/24 Javascript
webpack学习笔记之优化缓存、合并、懒加载
2017/08/24 Javascript
vue组件发布到npm简单步骤
2017/11/30 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
2019/02/01 Javascript
shelve  用来持久化任意的Python对象实例代码
2016/10/12 Python
Python简单计算文件MD5值的方法示例
2018/04/11 Python
使用python远程操作linux过程解析
2019/12/04 Python
python定义类self用法实例解析
2020/01/22 Python
Python如何基于Tesseract实现识别文字功能
2020/06/05 Python
python opencv角点检测连线功能的实现代码
2020/11/24 Python
墨西哥购物网站:Elektra
2020/01/21 全球购物
Mybag美国/加拿大:英国奢华包包和名牌手袋网站
2020/02/16 全球购物
JNI的定义
2012/11/25 面试题
Linux内核的同步机制是什么?主要有哪几种内核锁
2016/07/11 面试题
服装设计行业个人的自我评价
2013/12/20 职场文书
上班迟到检讨书范文300字
2014/11/02 职场文书
学前教育见习总结
2015/06/23 职场文书
如何用JavaScript实现一个数组惰性求值库
2021/05/05 Javascript
详解PHP Swoole与TCP三次握手
2021/05/27 PHP
解决pytorch读取自制数据集出现过的问题
2021/05/31 Python