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 相关文章推荐
autoPlay 基于jquery的图片自动播放效果
Dec 07 Javascript
javascript常用代码段搜集
Dec 04 Javascript
jQuery中bind()方法用法实例
Jan 19 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
Jan 23 Javascript
JavaScript必知必会(五) eval 的使用
Jun 08 Javascript
微信小程序 开发之快递查询功能的实现
Jan 09 Javascript
浅谈Vue-cli 命令行工具分析
Nov 22 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
Sep 25 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
Nov 06 Javascript
ZK中使用JS读取客户端txt文件内容问题
Nov 07 Javascript
简单了解JavaScript sort方法
Nov 25 Javascript
JavaScript switch语句使用方法简介
Dec 30 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
下载文件的点击数回填
2006/10/09 PHP
CI框架在CLI下执行占用内存过大问题的解决方法
2014/06/17 PHP
php7 参数、整形及字符串处理机制修改实例分析
2020/05/25 PHP
javascript客户端解决方案 缓存提供程序
2010/07/14 Javascript
基于jquery的时间段实现代码
2012/08/02 Javascript
jquery ajax跨域解决方法(json方式)
2014/02/04 Javascript
js获取url中的参数且参数为中文时通过js解码
2014/03/19 Javascript
js如何判断用户是在PC端和还是移动端访问
2014/04/24 Javascript
AngularJs解决跨域问题案例详解(简单方法)
2016/05/19 Javascript
Bootstrap学习笔记之css样式设计(2)
2016/06/07 Javascript
关于input全选反选恶心的异常情况
2016/07/24 Javascript
深入理解Webpack 中路径的配置
2017/06/17 Javascript
解决ztree搜索中多级菜单展示不全问题
2017/07/05 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
2017/10/09 Javascript
Vue加载组件、动态加载组件的几种方式
2018/08/31 Javascript
d3绘制基本的柱形图的实现代码
2018/12/12 Javascript
vscode配置vue下的es6规范自动格式化详解
2019/03/20 Javascript
详解Vue前端生产环境发布配置实战篇
2019/05/07 Javascript
[01:05:40]VG vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python使用ntplib库同步校准当地时间的方法
2016/07/02 Python
python读取图片的方式,以及将图片以三维数组的形式输出方法
2019/07/03 Python
python实现用户名密码校验
2020/03/18 Python
Python实现常见的几种加密算法(MD5,SHA-1,HMAC,DES/AES,RSA和ECC)
2020/05/09 Python
Python如何对齐字符串
2020/07/30 Python
Python爬取数据并实现可视化代码解析
2020/08/12 Python
PyCharm安装PyQt5及其工具(Qt Designer、PyUIC、PyRcc)的步骤详解
2020/11/02 Python
史泰博(Staples)中国官方网站:办公用品一站式采购
2016/09/05 全球购物
用JAVA SOCKET编程,读服务器几个字符,再写入本地显示
2012/11/25 面试题
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
办公室文秘自我鉴定
2013/09/21 职场文书
思想政治自我鉴定
2013/10/06 职场文书
人事行政主管岗位职责
2015/04/09 职场文书
煤矿安全生产管理协议书
2016/03/22 职场文书
浅谈Python 中的复数问题
2021/05/19 Python
Win10系统下配置Java环境变量
2021/06/13 Java/Android
PostgreSQL13基于流复制搭建后备服务器的方法
2022/01/18 PostgreSQL