JS网页图片按比例自适应缩放实现方法


Posted in Javascript onJanuary 15, 2014

用户上传照片,照片的尺寸未知;需要生成一个预览,这个预览图要根据提供给用户预览的区域自应用,并且居中;如果图片太大,需要按比例缩放。如下图。

JS网页图片按比例自适应缩放实现方法

瞄了一下,居中可以用 text-align:center; 来实现。而按比例缩放,利用预设 <img /> 的 width 、height 属性解决不了。因为用户图片可能是很长的,也可能是很宽的。在线上想了一下他们的关系,按条件来判断是这样的:

if(实际宽度 > 预览最大宽度) {
    缩放宽度 = 预览最大宽度
}

if(实际高度 > 预览最大高度) {
    缩放高度 = 预览最大高度
}
但是这样会有问题,比如当宽度和高度都被缩放,如果缩放比较不同,图片就不是按比例缩放,会变得非常丑。为了让它按比例缩放,就需要做各种判断了。那这样就违背了我们希望程序自动化的原则了。再想想,虽然不喜欢数学,但数学还是很好用的,应该有其他办法。而既然是按比例缩放,何不用实际图像和预览区域宽度作的比例来计算他们关系?hmmmm… 果然 OK。实际上我们永远都只需要缩放宽度或高度中的其中一个。因为比例只有大和小种情况。具体的,写一个函数来实现它吧:

/**
 * 图片按比例自适应缩放
 * @param img {Element} 用户上传的图片
 * @param maxWidth {Number} 预览区域的最大宽度
 * @param maxHeight {Number} 预览区域的最大高度
 */
var resizeImg = function(img, maxWidth, maxHeight){
        var w = img.width,
               h = img.height;
        // 当图片比预览区域小时不做任何改变
        if(w < maxWidth && h < maxHeight) return;
        // 当实际图片比例大于预览区域宽高比例时
        // 缩放图片宽度,反之缩放图片宽度
        w/h > maxWidth/maxHeight  ? img.width = maxWidth : img.height = maxHeight;
Javascript 相关文章推荐
Javascript与vbscript数据共享
Jan 09 Javascript
js中将多个语句写成一个语句的两种方法小结
Dec 08 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
Aug 06 Javascript
在父页面调用子页面的JS方法
Sep 29 Javascript
JS实现简单的图书馆享元模式实例
Jun 30 Javascript
浅谈js中的引用和复制(传值和传址)
Sep 18 Javascript
JS敏感词过滤代码
Dec 23 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
Jul 11 Javascript
Node.js利用断言模块assert进行单元测试的方法
Sep 28 Javascript
jquery实现搜索框功能实例详解
Jul 23 jQuery
vue学习笔记之过滤器的基本使用方法实例分析
Feb 01 Javascript
vue如何搭建多页面多系统应用
Jun 17 Javascript
javascript删除字符串最后一个字符
Jan 14 #Javascript
javascript制作loading动画效果 loading效果
Jan 14 #Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
Jan 14 #Javascript
如何动态的导入js文件具体该怎么实现
Jan 14 #Javascript
将查询条件的input、select清空
Jan 14 #Javascript
js导出txt示例代码
Jan 14 #Javascript
javascript 通用loading动画效果实例代码
Jan 14 #Javascript
You might like
php学习 函数 课件
2008/06/15 PHP
Yii实现显示静态页的方法
2016/04/25 PHP
MooTools 页面滚动浮动层智能定位实现代码
2011/08/23 Javascript
下拉框select的绑定示例
2014/09/04 Javascript
jquery动感漂浮导航菜单代码分享
2020/04/15 Javascript
Jquery实现简单的轮播效果(代码管用)
2016/03/14 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
2016/04/03 Javascript
下雪了 javascript实现雪花飞舞
2020/08/02 Javascript
第八篇Bootstrap下拉菜单实例代码
2016/06/21 Javascript
很棒的js Tab选项卡切换效果
2016/08/30 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
2017/03/30 Javascript
nodejs基础之buffer缓冲区用法分析
2018/12/26 NodeJs
小程序input数据双向绑定实现方法
2019/10/17 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
2020/02/27 Javascript
element跨分页操作选择详解
2020/06/29 Javascript
Python3 操作符重载方法示例
2017/11/23 Python
python实现守护进程、守护线程、守护非守护并行
2018/05/05 Python
解决Pycharm无法import自己安装的第三方module问题
2018/05/18 Python
Python利用Django如何写restful api接口详解
2018/06/08 Python
python实现将一个数组逆序输出的方法
2018/06/25 Python
python树莓派红外反射传感器
2019/01/21 Python
python pytest进阶之conftest.py详解
2019/06/27 Python
Python aiohttp百万并发极限测试实例分析
2019/10/26 Python
python实现高斯判别分析算法的例子
2019/12/09 Python
python cv2截取不规则区域图片实例
2019/12/21 Python
福克斯租车:Fox Rent A Car
2017/04/13 全球购物
马来西亚在线购物:POPLOOK.com
2019/12/09 全球购物
档案检查欢迎词
2014/01/13 职场文书
颁奖晚会主持词
2014/03/25 职场文书
单位委托书怎么写
2014/08/02 职场文书
英语课外活动总结
2014/08/27 职场文书
公路局群众路线教育实践活动第一阶段工作汇报
2014/10/25 职场文书
大学教师个人总结
2015/02/10 职场文书
2015年爱国卫生月活动总结
2015/03/26 职场文书
结婚纪念日感言
2015/08/01 职场文书
创业计划书之情侣餐厅
2019/09/29 职场文书