S实现控制图片显示大小的方法【图片等比例缩放功能】

最新推荐文章于 2021-07-23 10:57:41 发布
最新推荐文章于 2021-07-23 10:57:41 发布
阅读量245 收藏
点赞数
文章标签： xhtml javascript ViewUI
原文链接：https://yq.aliyun.com/articles/522102
版权

S实现控制图片显示大小的方法【图片等比例缩放功能】

【需求】：读取磁盘中的图片，展示在弹出框中，等比例缩放图片，使图片显示完全。

（读取磁盘中的图片展示在前台，请参照我的另一篇文章：）

【开发】：

调用说明：

直接调用js函数即可。

我测试是一个image 标签中直接调用，如下：

1
2
3
4
5
<div>
     <img id= "showImageimg" 
     src= "/sirdifoa/applycorrection/getImage.do?imgName=2017001.jpg" 
     title= "2017001.jpg"  onload= "AutoResizeImage(500,500,this)" >
</div>

【效果】：

wKioL1nMxyTDQRthAAKQhmdwTBk859.png-wh_50

【js代码】：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!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=utf-8"  />
< 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  />
原图显示（534 X 800）< br  />
onload="AutoResizeImage(0,0,this)< br  />
< a  href = "http://files.jb51.net/file_images/article/201702/2017218121607044.jpg"  target = "_blank" >< img  src = "http://files.jb51.net/file_images/article/201702/2017218121607044.jpg"  border = "0"  width = "0"  height = "0"  onload = "AutoResizeImage(0,0,this)"  alt = "534 X 800" /></ a >< br />< br  />
1.按宽度250压缩,不限制高度 按比例压缩< br  />
onload="AutoResizeImage(250,0,this)"< br  />
< a  href = "http://www.jb51.net/"  target = "_blank" >< img  src = "http://files.jb51.net/file_images/article/201702/2017218121607044.jpg"  border = "0"  width = "0"  height = "0"  onload = "AutoResizeImage(250,0,this)"  alt = "250 X 374" /></ a >< br  />< br  />
2.按高度250压缩,不限制宽度 按比例压缩< br  />
onload="AutoResizeImage(0,250,this)"< br  />
< a  href = "http://www.jb51.net/"  target = "_blank" >< img  src = "http://files.jb51.net/file_images/article/201702/2017218121607044.jpg"  border = "0"  width = "0"  height = "0"  onload = "AutoResizeImage(0,250,this)"  alt = "166 X 250" /></ a >< br  />< br  />
3.按高度250宽度250 按比例压缩< br  />
onload="AutoResizeImage(250,250,this)"< br  />
< a  href = "http://www.jb51.net/"  target = "_blank" >< img  src = "http://files.jb51.net/file_images/article/201702/2017218121607044.jpg"  border = "0"  width = "0"  height = "0"  onload = "AutoResizeImage(250,250,this)"  alt = "200 X 300" /></ a >< br  />< br  />
4.高宽不等比例压缩 （400 X 512）,此时高度不变，会自动按高度的比例压缩。< br  />
onload="AutoResizeImage(400,512,this)"< br  />
< a  href = "http://www.jb51.net/"  target = "_blank" >< img  src = "http://files.jb51.net/file_images/article/201702/2017218121607044.jpg"  border = "0"  width = "0"  height = "0"  onload = "AutoResizeImage(400,512,this)"  alt = "341 X 512" /></ a >< br  />< br  />
5.高宽不等比例压缩 （300 X 600）,此时宽度不变，会自动按宽度的比例压缩。< br  />
onload="AutoResizeImage(300,600,this)"< br  />
< a  href = "http://www.jb51.net/"  target = "_blank" >< img  src = "http://files.jb51.net/file_images/article/201702/2017218121607044.jpg"  border = "0"  width = "0"  height = "0"  onload = "AutoResizeImage(300,600,this)"  alt = "300 X 449" /></ a >< br  />< br  />
6.如果图片本来的高度和宽度小于压缩的最大高度和宽度，则不会拉大显示图片（按原图显示）< br  />
原图444 x 207,压缩为 500 x 600,将保持原图显示< br  />
onload="AutoResizeImage(500,600,this)"< br  />
< a  href = "http://www.jb51.net/"  target = "_blank" >< img  src = "http://files.jb51.net/file_images/article/201702/2017218122006996.jpg"  border = "0"  width = "0"  height = "0"  onload = "AutoResizeImage(500,600,this)"  alt = "444 X 207" /></ a >< br  />< br  />
</ body >
</ html >

运行效果图如下：







      本文转自建波李 51CTO博客，原文链接：http://blog.51cto.com/jianboli/1969528，如需转载请自行联系原作者



weixin_34375233
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
AutoResizeImage图片压缩方法
weixin_44542089的博客
04-23 592
AutoResizeImage()，MVC项目中自带的一种图片压缩方法，无需引用或者下载便可以在项目的视图层运用。近期在制作一个信息录入文本域，既然是要替用户上传信息的，自然少不了文件选择器功能的调用，往文本域中插入一个选择文件的按钮倒是简单，但是对用户选择的文件数据处理这一方面确是有些复杂。文件的选择方面自然是不可能全部文件类型都照单全收，运用正则表达式，判断用户选择到的文件的后缀名，以此来限制...
HTML Image Auto Resize, HTML图片大小自动调整
BRUNI (不如你) 's CSDN BLOG
04-28 2万+
 客户再次发来修改意见,有关图片,因为不同尺寸的图片如果不是按比例显示的化,就会长度或宽度被拉伸,看起来很不协调.为了解决这个问题,特意在网上找了一些资料.自己的思路是有两种解决方法:1. 一种是调整图片的尺寸2. 另一种是让浏览器自动调整尺寸第一种方法好,但是对于一个图片你必须保存几个不同尺寸的版本/文件.但是需要额外的编程和存储空间.ImageMagick是一个不错的软件,通过
JS实现控制图片显示大小的方法【图片等比例缩放功能】
10-20
主要介绍了JS实现控制图片显示大小的方法,即实现图片等比例缩放功能,涉及JS动态操作页面元素属性相关技巧,需要的朋友可以参考下
JS控制图片显示的大小（图片等比例缩放）
liaobc的专栏
03-01 7055
JS控制图片显示的大小（图片等比例缩放） http://www.cnblogs.com/czh-liyu/archive/2007/12/25/1014841.html         代码 Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHigh
控制图片按比例显示[FREETEXTBOX]（2）
小儒.NET
05-09 1099
此方法用于在FREETEXTBOX中的上传图片：（参照上传图片）if (UploadFile.PostedFile.FileName.Trim() != "") {if (IsValidFileType(UploadFile.PostedFile.FileName)) {try {string UploadFileName = "";string UploadFileDestination =
CSS--图片等比例缩放
qq_39241421的博客
04-18 312
&lt;div style='width:自定义px；'&gt;    &lt;img src="" style=" width:auto;height:auto;max-width：100%；max-height：100%；"/&gt;&lt;/div&gt;图片高度根据父级的宽高缩放；
保持原图比例放大缩小图片
04-14
使用方法：调用onload=AutoResizeImage()即可： <img src="./sample_pic.jpg" border="0" width="0" height="0" onload="AutoResizeImage(300,600,this)" /> 注意设置width="0" height="0" 也可onload="AutoResizeImage(0,250,this)"或onload="AutoResizeImage(250,0,this)" ，注意体会。 以下为使用示例： <!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=utf-8" /> <title>最新javascript自动按比例显示图片，按比例压缩图片显示</title> <script language="javascript" src="./resizepic.js"></script> </head> <body> <br /> 原图显示（534 X 800）<br /> onload="AutoResizeImage(0,0,this)<br /> <a href="./sample_pic.jpg" target="_blank"><img src="./sample_pic.jpg" border="0" width="0" height="0" onload="AutoResizeImage(0,0,this)" alt="534 X 800"/></a><br/><br /> 1.按宽度250压缩,不限制高度 按比例压缩<br /> onload="AutoResizeImage(250,0,this)"<br /> <a href="http://www.toyi.cc" target="_blank"><img src="./sample_pic.jpg" border="0" width="0" height="0" onload="AutoResizeImage(250,0,this)" alt="250 X 374"/></a><br /><br /> 2.按高度250压缩,不限制宽度 按比例压缩<br /> onload="AutoResizeImage(0,250,this)"<br /> <a href="http://www.toyi.cc" target="_blank"><img src="./sample_pic.jpg" border="0" width="0" height="0" onload="AutoResizeImage(0,250,this)" alt="166 X 250"/></a><br /><br /> 3.按高度250宽度250 按比例压缩<br /> onload="AutoResizeImage(250,250,this)"<br /> <a href="http://www.toyi.cc" target="_blank"><img src="./sample_pic.jpg" border="0" width="0" height="0" onload="AutoResizeImage(250,250,this)" alt="200 X 300"/></a><br /><br /> 4.高宽不等比例压缩 （400 X 512）,此时高度不变，会自动按高度的比例压缩。<br /> onload="AutoResizeImage(400,512,this)"<br /> <a href="http://www.toyi.cc" target="_blank"><img src="./sample_pic.jpg" border="0" width="0" height="0" onload="AutoResizeImage(400,512,this)" alt="341 X 512"/></a><br /><br /> 5.高宽不等比例压缩 （300 X 600）,此时宽度不变，会自动按宽度的比例压缩。<br /> onload="AutoResizeImage(300,600,this)"<br /> <a href="http://www.toyi.cc" target="_blank"><img src="./sample_pic.jpg" border="0" width="0" height="0" onload="AutoResizeImage(300,600,this)" alt="300 X 449"/></a><br /><br /> 6.如果图片本来的高度和宽度小于压缩的最大高度和宽度，则不会拉大显示图片（按原图显示）<br /> 原图444 x 207,压缩为 500 x 600,将保持原图显示<br /> onload="AutoResizeImage(500,600,this)"<br /> <a href="http://www.toyi.cc" target="_blank"><img src="http://p.blog.csdn.net/images/p_blog_csdn_net/feng_sundy/242776/o_20070410_b7409cd284a0f799a357uePcEFa6ty0X.jpg" border="0" width="0" height="0" onload="AutoResizeImage(500,600,this)" alt="444 X 207"/></a><br /><br /> </body> </html>
opencv图片缩放
03-29
对于刚开始学习opencv的同学是个很好的工程例子，用于对图片进行缩放。
auto_resize_image
03-12
auto_resize_image 之前使用它： 使用后： 因此，只需在您的项目中使用它即可！ 它的原理与ResizeImage相同，可以像这样简单地使用它： Image ( image : AutoResizeImage ( NetworkImage ( widget.imageUrl, ), ), ); 只需用它包装ImageProvider，它将有效地减少内存。 详细用法请阅读源代码。
ImageView 宽度设定，高度按比例缩放
10-20
ImageView 宽度设定，高度按比例缩放
OpenCvSharp 绕中心点旋转图像
聂绍举的博客
11-14 5576
工作上要用到opencv，无奈不会写c++，只会C#，只好用opencvsharp。 前两天遇到了一个小问题，就是使用WarpAffine旋转图像。结果图不是我想要的： 原图： 不理想的旋转图： 不理想旋转代码： //src:原图 //angle：旋转角度 //dst：结果图像 void rotate(Mat src,float angle,out Mat dst) { ...
Qt 图片适应QLabel控件大小（饱满缩放和按比例缩放）
热门推荐
kfy2011的专栏
09-06 6万+
直接上代码： QImage Image; Image.load("d:/test.jpg"); QPixmap pixmap = QPixmap::fromImage(Image); int with = ui->labPic->width(); int height = ui->labPic->height(); QPixmap fitpixma
HTML <img> 标签的 height 和 width 属性
weixin_34329187的博客
01-29 1063
定义和用法 &lt;img&gt; 标签的 height 和 width 属性设置图像的尺寸。 提示：为图像指定 height 和 width 属性是一个好习惯。如果设置了这些属性，就可以在页面加载时为图像预留空间。如果没有这些属性，浏览器就无法了解图像的尺寸，也就无法为图像保留合适的空间，因此当图像加载时，页面的布局就会发生变化。（下面的篇幅详细解释了这个观点）。 提示：请不要通过 hei...
Web安全(图片验证码大小可控导致ddos)
qq_42383069的博客
07-23 3283
图片验证码大小可控导致ddos 一. 前言: 在网站登录处,通常会有图片验证码.我们知道,Web漏洞的成因都有一个很重要的共同点,那就是外部可控. 比如Sql注入中的Url,用户输入的地方可能会存在XSS等.那么如果图片验证码可控,会发生什么呢? 二 . 原理: 比如一个生成图片验证码的链接如下: http://xx.xx.xx.xx/DEV_GBK_1.4.0/gbk/install_package/api.php?op=checkcode&code_len=4&font_size=20&
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值