`

javascript 实现对图片不失真的缩放

阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>最新javascript自动按比例显示图片,按比例压缩图片显示</title>
<script type="text/javascript">
function AutoResizeImage(maxWidth,maxHeight,objImg){
var img = new Image();
img.src = objImg.src;
var hRatio;
var wRatio;
var Ratio = 1;
var w = img.width;
var h = img.height;
wRatio = maxWidth / w;
hRatio = maxHeight / h;
if (maxWidth ==0 && maxHeight==0){
Ratio = 1;
}else if (maxWidth==0){//
if (hRatio<1) Ratio = hRatio;
}else if (maxHeight==0){
if (wRatio<1) Ratio = wRatio;
}else if (wRatio<1 || hRatio<1){
Ratio = (wRatio<=hRatio?wRatio:hRatio);
}
if (Ratio<1){
w = w * Ratio;
h = h * Ratio;
}
objImg.height = h;
objImg.width = w;
}
</script>
</head>
<body>
<br />
原图显示(338 X 450)<br />
<br />
<img src="http://ww3.sinaimg.cn/bmiddle/7b232d43tw1dtlas4qd31j.jpg" border="0" alt="534 X 800"/><br/><br />
1.按宽度250压缩,不限制高度 按比例压缩<br />
<br />
<img onload="AutoResizeImage(250,0,this)" src="http://ww3.sinaimg.cn/bmiddle/7b232d43tw1dtlas4qd31j.jpg"  border="0" width="0" height="0"  alt="250 X 374"/></a><br /><br />
2.按高度250压缩,不限制宽度 按比例压缩<br />
<br />
<img onload="AutoResizeImage(0,250,this)" src="http://ww3.sinaimg.cn/bmiddle/7b232d43tw1dtlas4qd31j.jpg"  border="0" width="0" height="0"  alt="166 X 250"/></a><br /><br />
3.按高度250宽度250 按比例压缩<br />
<br />
<img onload="AutoResizeImage(250,250,this)" src="http://ww3.sinaimg.cn/bmiddle/7b232d43tw1dtlas4qd31j.jpg"  border="0" width="0" height="0"  alt="200 X 300"/></a><br /><br />
4.高宽不等比例压缩 (338 X 300),此时高度不变,会自动按高度的比例压缩。<br />
<br />
<img  onload="AutoResizeImage(338,300,this)" src="http://ww3.sinaimg.cn/bmiddle/7b232d43tw1dtlas4qd31j.jpg"  border="0" width="0" height="0"  alt="341 X 512"/></a><br /><br />
5.高宽不等比例压缩 (200 X 450),此时宽度不变,会自动按宽度的比例压缩。<br />
<br />
<img  onload="AutoResizeImage(200,450,this)" src="http://ww3.sinaimg.cn/bmiddle/7b232d43tw1dtlas4qd31j.jpg"   border="0" width="0" height="0"  alt="300 X 449"/></a><br /><br />
6.如果图片本来的高度和宽度小于压缩的最大高度和宽度,则不会拉大显示图片(按原图显示)<br />
原图338 x 450,压缩为 500 x 600,将保持原图显示<br />
<br />
<img onload="AutoResizeImage(500,600,this)" src="http://ww3.sinaimg.cn/bmiddle/7b232d43tw1dtlas4qd31j.jpg"  border="0" width="0" height="0"  alt="444 X 207"/></a><br /><br />
</body>
</html>
分享到:
评论
1 楼 海角在眼前 2012-09-04  
还是会失真的,当图片比例压缩 (100 X 100),在IE6下失真很明显。
本质上没有解决失真问题。

相关推荐

    js控制图片缩放 不失真 获取图片真实长和宽

    在JavaScript中,实现图片的等比例缩放以保持不失真是一项常见的需求,特别是在网页设计和动态展示中。这里我们将深入探讨如何实现这一功能,并解决图片在切换时保持正确比例的问题。 首先,我们要明白图片不失真的...

    JavaScript实现网页图片等比例缩放 图片等比例缩放

    ### JavaScript 实现网页图片等比例缩放 在网页设计与开发过程中,经常遇到的一个问题是确保图片能在不同设备、不同分辨率的屏幕上保持良好的显示效果。图片的等比例缩放是其中一种解决方案,它能够保证图片在缩放...

    javascript实现图片缩放

    在JavaScript中实现图片的缩放功能是一项常见的任务,尤其在网页开发中,为了提供良好的用户体验,用户可能需要查看图片的细节或者节省空间显示概览。本文将深入探讨如何使用JavaScript来实现图片的放大和缩小功能。...

    js按比例缩放图片,不变形,不失真

    本篇文章将详细介绍如何利用JavaScript实现按比例缩放图片,以保持其原始比例,确保图片质量不受影响。 首先,我们需要理解图片变形和失真的原因。当一个图片的宽高比(宽度与高度的比例)与显示区域的宽高比不一致...

    JS图片等比例缩放方法完整示例

    本篇将详细介绍如何使用JavaScript实现图片的等比例缩放,并通过一个完整的示例来解析其工作原理。 首先,我们需要理解等比例缩放的基本概念。等比例缩放是指在调整图片大小时,保持其宽高比不变,避免图像变形。在...

    js实现图片的按比例缩放

    为了解决这个问题,我们可以使用JavaScript来实现图片的按比例缩放,确保图片始终保持其原始比例,避免变形。下面将详细介绍如何使用JavaScript来实现这一功能,并结合提供的文件进行解析。 首先,我们需要理解图片...

    javascript和jquery图片缩放

    本教程将详细讲解JavaScript和jQuery如何实现图片的自动缩放功能。 首先,我们需要理解JavaScript和jQuery的基础。JavaScript是一种在客户端运行的脚本语言,用于增加网页的交互性;jQuery是一个JavaScript库,它...

    JQuery实现图片缩放

    通过以上步骤,我们就成功地使用jQuery实现了图片的动态缩放,无论是在页面初始化还是窗口大小变化时,都能保证图片的尺寸适配并且不失真。这个过程不仅涉及到了jQuery的基础操作,还展示了如何在实际项目中应用这些...

    图片按比例缩放

    如果不按比例缩放,图片可能会被拉伸或压缩,导致失真。在处理图像时,保持原图的比例是非常重要的,因为它可以确保图片内容的清晰度和视觉效果。 缩放图片的工具和方法多种多样,其中最常用的是使用图像编辑软件,...

    微信小程序 实现canvas按照原图等比例不失真绘制海报图并保存海报图片到本地相册

    本文将详细讲解如何使用canvas实现原图等比例不失真绘制,并将绘制的海报图保存到本地相册。 首先,我们需要了解canvas的基本用法。Canvas是HTML5中引入的一个重要元素,它提供了一个画布,允许通过JavaScript进行...

    cropper制作图片裁剪不失真

    `Cropper.js` 是一个优秀的JavaScript库,专门用于实现高精度和灵活性的图片裁剪功能,它确保了裁剪后的图片不失真,因此非常适合用于制作 Banner、头像等应用场景。在本文中,我们将深入探讨`Cropper.js`的相关知识...

    图片等比例缩放.txt 图片等比例缩放.txt

    为了保持图片的视觉效果不失真,等比例缩放成为了常用的一种处理方式。本篇文章将从一个具体的JavaScript代码示例出发,详细解析图片等比例缩放的技术实现细节。 #### 二、核心代码分析 首先,我们来看一下这段...

    图片等比例缩放个人最优化版(IE6,IE7,FF)

    等比例缩放的基本原理是保持图片的纵横比不变,即在调整图片宽度或高度时,另一个维度也会相应按比例调整,以确保图片不失真。在JavaScript中,我们可以编写函数来实现这一功能。以下是一个简单的等比例缩放函数示例...

    图片缩放旋转移动javascript

    总结来说,这个项目提供了使用JavaScript和jQuery进行图片缩放、旋转和移动的基础实现,虽然它可能还有待完善,但对于初学者或希望快速实现类似功能的开发者来说,这是一个不错的学习资源。通过分析和理解这个项目的...

    移动端H5图片轮播缩放

    同时,为了保持良好的用户体验,插件可能还包括了防止图片过度缩放的限制机制,以避免图像失真。 3. **性能优化**:在移动端,资源加载速度和内存管理是关键。Sencha Touch框架本身就对这些方面进行了优化,而此...

    JQuery实现等比缩放图片插件

    有时候,我们需要根据不同的屏幕尺寸或布局需求,使得图片能够等比例地缩放,以保持其原始比例,避免失真。`JQuery`是一个流行的JavaScript库,它提供了丰富的功能和简便的API,帮助开发者更轻松地处理DOM操作、事件...

    原生JavaScript制作网页div里面大图片按比例缩放排列

    "原生JavaScript制作网页div里面大图片按比例缩放排列"这个主题聚焦于如何使用JavaScript动态调整图片尺寸,使其适应div容器并保持正确的比例,从而提供良好的用户体验。下面将详细介绍这个过程中的关键知识点。 1....

    zoomify 实现图片的放大不失真

    5. **JavaScript库支持**:Zoomify通常使用JavaScript库来实现交互效果,如平移、缩放等操作。这些库可以处理用户的输入事件,动态加载和显示图像块。 在实际应用中,Zoomify的实现步骤包括: 1. **准备高分辨率...

    图片编辑旋转缩放位移最终版-缩放改版为控制width.rar

    在描述中提到的"缩放改版为控制width和height",这意味着开发者可能使用了JavaScript或者CSS来动态改变图片元素的宽度和高度,从而实现图片的缩放效果。这种方式相比直接修改图片的scale属性或者使用CSS的transform...

    网页图片自动按照比例缩放到指定大小

    针对这一问题,我们可以利用编程技术实现图片按比例自动缩放到指定大小的功能。 首先,我们需要了解的是图片的尺寸单位通常为像素(pixels)。图片的宽度和高度可以用像素值表示,例如,一张图片的原始尺寸可能是...

Global site tag (gtag.js) - Google Analytics