JS图片等比例缩放方法完整示例
本文实例讲述了JS图片等比例缩放方法。分享给大家供大家参考，具体如下：
<!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=gb2312" />
<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 />
<img src="1.jpg"
border="0"
width="0"
height="0"
onload="AutoResizeImage(100,0,this)"
/>
width:100px
<br />
<br />
<img src="1.jpg"
border="0"
width="0"
height="0"
onload="AutoResizeImage(0,100,this)"
/>
height:100px
<br />
<br />
<img src="1.jpg"
border="0"
width="0"
height="0"
onload="AutoResizeImage(100,100,this)"
/>
width:100px height:100px
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</body>
</html>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关推荐
-
js 图片缩放（按比例）控制代码
缩放代码: 复制代码 代码如下: 缩放代码: <script type="text/javascript"> //图片按比例缩放 var flag = false; function DrawImage(ImgD, iwidth, iheight) { //参数(图片,允许的宽度,允许的高度) var image = new Image(); image.src = ImgD.src; if (image.width > 0 && image.heig
-
JavaScript 图片放大镜（可拖放、缩放效果）第1/4页
前些日子突然想做一个透镜效果,就突然想到了这个效果,于是找出当年"珍藏"的代码决定一尝所愿. 前言:这个程序主要分三部分:层的拖放.层的缩放.图片切割(包括预览). 其中层的拖放是很常见的效果,层的缩放有点难度,图片切割看着炫其实原理也很简单. 不过在实现的过程中也学习到很多以前不知道的东西,下面都会说明,希望大家从中也能学到东西. 原理: [拖放程序] 基本原理很简单,不知道的看代码就明白,其中参考了越兔和BlueDestiny的相关文章. 下面说一下比较有用的地方: [范围限制]
-
关于图片按比例自适应缩放的js代码
如下图. 瞄了一下,居中可以用 text-align:center; 来实现.而按比例缩放,利用预设 <img /> 的 width .height 属性解决不了.因为用户图片可能是很长的,也可能是很宽的.在线上想了一下他们的关系,按条件来判断是这样的: 复制代码 代码如下: if(实际宽度 > 预览最大宽度) { 缩放宽度 = 预览最大宽度 } if(实际高度 > 预览最大高度) { 缩放高度 = 预览最大高度 } 但是这样会有问题,比如当宽度和高度都被缩放,如果缩放比较不同,图
-
JavaScript实现网页图片等比例缩放实现代码及调用方式
在处理网页图片时,特别是一些图片列表的应用里面,很难保证图片统一大小,直接设置图片大小又会导致图片拉伸,造成图片模糊,本文介绍的代码可以在图片加载完成后自动按比例调整图片大小. Javascript: 复制代码 代码如下: < script language="javascript" type="text/javascript"> < !-- // 说明:用 JavaScript 实现网页图片等比例缩放 // 整理:http://www.CodeB
-
js 图片等比例缩放代码
复制代码 代码如下: var scaleImage = function(o, w, h){ var img = new Image(); img.src = o.src; if(img.width >0 && img.height>0) { if(img.width/img.height >= w/h) { if(img.width > w) { o.width = w; o.height = (img.height*w) / img.width; } else
-
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
最近的项目里面需要对书籍的封面进行处理,就是加一条阴影线形成书脊的凹凸感,然后将书脊切出,分成两部分,以便客户端实现打开动画.由于需要在服务器端处理,使用就研究使用imagemagick来进行.同时准备封装了一个Node.js和Python的方法,主要还是讲一下然后使用imagemagick来对图片进行缩放.合成后进行裁剪吧. 首先素材文件如下(左边未处理封面,右边为需要合成上去的阴影): 安装ImageMagick的过程就不讲了,可以参考官网的安装方法:http://www.imagemagi
-
JS 图片缩放效果代码
复制代码 代码如下: <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <TITLE>onMouseWheel</TITLE> <SCRIPT> var count = 10; function Picture() { count = Counting(count); Resize
-
javascript 实现的完全兼容鼠标滚轴缩放图片的代码
code如下: 复制代码 代码如下: /*! *author:sohighthesky *blog:http://www.cnblogs.com/sohighthesky *date:2010-2-4 */ var zooming=function(e){ e=window.event ||e; var o=this,data=e.wheelDelta || e.detail*40,zoom,size; if(!+'\v1'){ zoom = parseInt(o.style.zoom) ||
-
THINKPHP+JS实现缩放图片式截图的实现
作者:杨鑫奇 原始链接:http://www.cnblogs.com/scotoma/archive/2010/03/05/1679477.html 今晚TP论坛的一位大哥加我了,说也遇到这个方面的问题,呵呵!想想其实很多东西都遇到了,是不是应该分享出来呢?其实自己的很多东西都是别人那来的,取之于网络用之于网络!只有大家多分享,才能够提高! 实现方式 上传图片 -- 保存并显示图片 -- JS获取缩略图参数 -- 提交位置参数 -- 图片缩放保存类处理图片 -- 保存截取的图片--更新数据库 -
-
JS+css 图片自动缩放自适应大小
我加了css的限制: 复制代码 代码如下: div img {}{max-width:600px;width:600px;width:expression(document.body.clientWidth>600?"600px":"auto");overflow:hidden;} ◎ max-width:600px; 在IE7.FF等其他非IE浏览器下最大宽度为600px.但在IE6中无效. ◎ width:600px; 在所有浏览器中图片的大小为600px
-
javascript图片自动缩放和垂直居中处理函数
复制代码 代码如下: <html> <head> <title>Untitled</title> <style type="text/css"> .testCss{width:200px;height:300px;border:1px red solid;text-align:center;display:block;} .testCss1{width:300px;height:300px;border:1px red sol
-
JS网页图片按比例自适应缩放实现方法
用户上传照片,照片的尺寸未知:需要生成一个预览,这个预览图要根据提供给用户预览的区域自应用,并且居中:如果图片太大,需要按比例缩放.如下图. 瞄了一下,居中可以用 text-align:center; 来实现.而按比例缩放,利用预设 <img /> 的 width .height 属性解决不了.因为用户图片可能是很长的,也可能是很宽的.在线上想了一下他们的关系,按条件来判断是这样的: if(实际宽度 > 预览最大宽度) { 缩放宽度 = 预览最大宽度} if(实际高度 > 预