展会信息港展会大全

javascript图片按比例自适应缩放实现代码
来源:互联网   发布日期:2016-03-25 16:29:30   浏览:2434次  

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

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

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

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

代码如下

复制代码

if(实际宽度 > 预览最大宽度) {

缩放宽度 = 预览最大宽度

}

if(实际高度 > 预览最大高度) {

缩放高度 = 预览最大高度

}

实际上我们永远都只需要缩放宽度或高度中的其中一个。因为比例只有大和小种情况。具体的,写一个函数来实现它吧:

代码如下

复制代码

* 图片按比例自适应缩放

* @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;

};

完整实例

代码如下

复制代码

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>图片按比例自适应缩放</title>

<style>

.cnt{text-align:center;width:600px;height:350px;margin:0 auto;border:1px solid #ddd;}

</style>

</head>

<body>

<div class="cnt">

<img id="img" src="5D_1920X1440_nature_wallpapers_aVistas005.jpg" alt="alipay" />

<br />

<a href="1920x1440/%5Bwallcoo.com%5D_1920X1440_nature_wallpapers_aVistas005.jpg" rel="nofollow">查看原图</a>

</div>

<script>

window.onload = function() {

var img =document.getElementById('img'),

/**

* 图片按比例自适应缩放

* @param img {Element} 用户上传的图片

* @param maxWidth {Number} 预览区域的最大宽度

* @param maxHeight {Number} 预览区域的最大高度

*/

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;

};

resizeImg(img, 500, 300);

}

</script>

</body>

</html>

赞助本站

人工智能实验室

相关热词: 开发 编程 android

AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港