JS控制图片显示的大小（图片等比例缩放）

最新推荐文章于 2024-03-13 16:39:38 发布
最新推荐文章于 2024-03-13 16:39:38 发布
阅读量661 收藏
点赞数
原文链接：http://www.cnblogs.com/liuzhuqing/archive/2013/01/23/7480635.html
版权

 

 

复制代码
JS控制图片显示的大小（图片等比例缩放） 代码
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<</SPAN>html xmlns="http://www.w3.org/1999/xhtml">
<</SPAN>head>
<</SPAN>meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<</SPAN>title>最新javascript自动按比例显示图片，按比例压缩图片显示</</SPAN>title>
<</SPAN>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<</SPAN>1) Ratio = hRatio;
}else if (maxHeight==0){
if (wRatio<</SPAN>1) Ratio = wRatio;
}else if (wRatio<</SPAN>1 || hRatio<</SPAN>1){
Ratio = (wRatio<=hRatio?wRatio:hRatio);
}
if (Ratio<</SPAN>1){
w = w * Ratio;
h = h * Ratio;
}
objImg.height = h;
objImg.width = w;
}
</</SPAN>script>
</</SPAN>head>
<</SPAN>body>
<</SPAN>br />
原图显示（534 X 800）<</SPAN>br />
οnlοad="AutoResizeImage(0,0,this)<</SPAN>br />
<</SPAN>a href="https://p-blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg" target="_blank"><</SPAN>img src="https://p-blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg" border="0" width="0" height="0" onload="AutoResizeImage(0,0,this)" alt="534 X 800"/></</SPAN>a><</SPAN>br/><</SPAN>br />
1.按宽度250压缩,不限制高度 按比例压缩<</SPAN>br />
οnlοad="AutoResizeImage(250,0,this)"<</SPAN>br />
<</SPAN>a href="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><</SPAN>img src="https://p-blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg" border="0" width="0" height="0" onload="AutoResizeImage(250,0,this)"  alt="250 X 374"/></</SPAN>a><</SPAN>br /><</SPAN>br />
2.按高度250压缩,不限制宽度 按比例压缩<</SPAN>br />
οnlοad="AutoResizeImage(0,250,this)"<</SPAN>br />
<</SPAN>a href="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><</SPAN>img src="https://p-blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg" border="0" width="0" height="0" onload="AutoResizeImage(0,250,this)"  alt="166 X 250"/></</SPAN>a><</SPAN>br /><</SPAN>br />
3.按高度250宽度250 按比例压缩<</SPAN>br />
οnlοad="AutoResizeImage(250,250,this)"<</SPAN>br />
<</SPAN>a href="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><</SPAN>img src="https://p-blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg" border="0" width="0" height="0" onload="AutoResizeImage(250,250,this)"  alt="200 X 300"/></</SPAN>a><</SPAN>br /><</SPAN>br />
4.高宽不等比例压缩 （400 X 512）,此时高度不变，会自动按高度的比例压缩。<</SPAN>br />
οnlοad="AutoResizeImage(400,512,this)"<</SPAN>br />
<</SPAN>a href="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><</SPAN>img src="https://p-blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg" border="0" width="0" height="0" onload="AutoResizeImage(400,512,this)"  alt="341 X 512"/></</SPAN>a><</SPAN>br /><</SPAN>br />
5.高宽不等比例压缩 （300 X 600）,此时宽度不变，会自动按宽度的比例压缩。<</SPAN>br />
οnlοad="AutoResizeImage(300,600,this)"<</SPAN>br />
<</SPAN>a href="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><</SPAN>img src="https://p-blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg" border="0" width="0" height="0" onload="AutoResizeImage(300,600,this)"  alt="300 X 449"/></</SPAN>a><</SPAN>br /><</SPAN>br />
6.如果图片本来的高度和宽度小于压缩的最大高度和宽度，则不会拉大显示图片（按原图显示）<</SPAN>br />
原图444 x 207,压缩为 500 x 600,将保持原图显示<</SPAN>br />
οnlοad="AutoResizeImage(500,600,this)"<</SPAN>br />
<</SPAN>a href="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><</SPAN>img src="https://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"/></</SPAN>a><</SPAN>br /><</SPAN>br />
</</SPAN>body>
</</SPAN>html>
复制代码

 

效果图：

转载于:https://www.cnblogs.com/liuzhuqing/archive/2013/01/23/7480635.html

track sun
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
图片按缩放比例实现旋转
11-10
照片旋转比较容易，但是控制照片的缩放比例旋转例子不是很多，要想旋转过程中控制大小防止照片撑破网页需要修改coos.ui.rotate.js中p width和p.height的值
php图片的裁剪与缩放生成符合需求的缩略图
12-18
图片太大且规格不统一，显示的控制需要靠JavaScript来完成，用在移动设备上时显示效果不好且流量巨大，需要对现有图片库的图片进行一次处理，生成符合移动设备用的缩略图，将原来客户端JS做的工作转移到服务器端用PHP的GD库来集中处理。 图片源与需要的大小： 复制代码 代码如下: $src_img = “wallpaper.jpg”; $dst_w = 300; $dst_h = 200; 剪裁图像，保证图像区域最大化显示，并按比例缩放到指定大小。一开始采用了 imagecopyresized 方法进行图像等比缩小，实际操作后发现，图像缩小后燥点非常严重。后再换用 imagecopyresa
js使用canvas实现图片鼠标滚轮放大缩小拖拽预览，显示像素坐标，显示像素值
youngboy的博客
03-13 886
todo 实现画矩形框，圆形roi。
JavaScript 图片切割效果
05-20
序一（08/07/21） 很久之前就在一个网站的截取相片的功能中看到这个效果，也叫图片裁剪、图片剪切（设置一下也可以做出放大镜等类似的效果）。 当时觉得很神奇，碍于水平有限，没做出来。 前些日子突然想做一个透镜效果，就突然想到了这个效果，于是找出当年“珍藏”的代码决定一尝所愿。 序二（08/12/06） 自上一个版本的图片切割效果出来后，虽然也经常看到“框架开发这个如何如何容易”之类的评论，但也受到很多人的肯定，小弟在此感谢大家的支持。 上一个版本由于是初次接触这类效果，而且是三个大功能一起开发，能力所限，所以仅仅是实现了效果就完成了。 后来我知道这个效果叫ImageCropper，找了些这类效果参考，完善了切割的部分。 近来我把其中的拖放效果和缩放效果单独出来研究，经过整理和完善，再套进切割效果，个人感觉效果已经不错了。 要说明的是这个只是一个效果，并不是真正的切割图片，要获取真正的切割图片请参考图片切割系统。 先看看效果： 图片地址： 程序说明 这个效果主要分三个部分：层的拖放、层的缩放、图片切割（包括预览）。 其中层的拖放和层的缩放我已经在其他两篇文章中有详细说明，这里就说说图片切割这部分吧。 【图片切割】 关于图片切割的设计，有三个方法： 1.定位四个半透明层，遮住要盖住的部分，没试过，感觉比较麻烦； 2.把图片设为背景图，通过设置背景图的位置来实现，但这样的缺点是只能按图片的正常比例实现，不够灵活； 3.把图片放到切割对象里面，通过设置图片的top和left实现，这个方法是可行，但下面有更简单的方法实现； 4.通过设置图片的clip来实现。 这里介绍方法4的实现方法，这个方法是从当年“珍藏”的代码中看到的，先说说clip： clip的作用是“检索或设置对象的可视区域。可视区域外的部分是透明的。” 依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值来剪切。 例如： div { position:absolute; width:60px; height:60px; clip:rect(0 20 50 10); } 注意position:absolute的设置是必须的（详细看手册）。 下面说说具体实现原理： 首先需要一个容器(_Container)，容器里面会插入三个层： 底图层(_layBase)：那个半透明的图片； 切割层(_layCropper)：正常显示的那个部分； 控制层(_layHandle)：就是控制显示的那个部分。 其中为了底图层和切割层是程序自动创建的图片，控制层是自己定义的层（程序中是一个div）。 底图层和切割层必须完全重合，程序中把这两个层都绝对定位到了左上角： this._layBase.style.top = this._layBase.style.left = this._layCropper.style.top = this._layCropper.style.left = 0; 层叠顺序也要设置一下保证各层顺序。 下面说说各部分的作用： 容器：除了容器本身的作用，通过设置其背景色来设置透明的渐变色，由于图片本身没有背景色所以要通过容器来设置； 底图层：在容器最底部，作用是显示非选择区域的图片，透明效果就是在这层设置； 切割层：最关键的一个层，在底图层和控制层之间，在这个层通过clip设置其可视区域来实现切割图片的效果； 控制层：位于顶部，拖放(_drag)和缩放(_resize)效果就是在这个层实现，根据其拖放和缩放的结果控制切割层的切割效果。 这里要注意的是控制层的_drag拖放效果的Transparent要设为true（详细看拖放效果的透明背景bug部分）。 要使用缩放需要把Resize设为true，并设置各个拖拉对象，程序通过_resize设置缩放的比例和最少范围（详细看拖拉缩放效果）。 下面说说控制层如何控制切割效果： 控制层的拖放和缩放过程中加入了SetPos设置切割样式程序，在SetPos程序中根据控制层的样式设置切割层的可视区域范围： var p = this.GetPos(); this._layCropper.style.clip = "rect(" + p.Top + "px " + (p.Left + p.Width) + "px " + (p.Top + p.Height) + "px " + p.Left + "px)"; 其中GetPos程序，它可以把当前控制层的样式参数作为一个对象返回： with(this._layHandle){ return { Top: offsetTop, Left: offsetLeft, Width: offsetWidth, Height: offsetHeight } } 如果理解了的话就会觉得其实原理挺简单的，不过要想出来还是要一定创意才行，为想出这个方法的人致敬！ 【切割预览】 预览效果需要设置Preview属性为预览容器对象，程序会自动给容器插入一个预览对象（图片）。 预览效果的关键在于如何根据控制层的数据来给预览对象定位，这个主要在SetPreview预览效果程序中处理。 首先根据控制层的高宽比置预览对象显示的宽和高（不是图片本身的宽高哦），这里可以用GetSize程序获取： var p = this.GetPos(), s = this.GetSize(p.Width, p.Height, this.viewWidth, this.viewHeight), scale = s.Height / p.Height; 其中GetSize获取尺寸程序可以根据图片实际大小按比例缩放到要设置的大小： Code var iWidth = nowWidth, iHeight = nowHeight, scale = iWidth / iHeight; //按比例设置 if(fixHeight){ iWidth = (iHeight = fixHeight) * scale; } if(fixWidth && (!fixHeight || iWidth > fixWidth)){ iHeight = (iWidth = fixWidth) / scale; } //返回尺寸对象 return { Width: iWidth, Height: iHeight } 可以看出如果后两个参数（viewWidth和this.viewHeight）都不设置就会按原来大小显示了， 然后再按预览图跟控制层的比例设置预览图的样式参数： var pHeight = this._layBase.height * scale, pWidth = this._layBase.width * scale, pTop = o.Top * scale, pLeft = o.Left * scale; 最后根据参数对预览对象进行样式设置和切割： Code with(this._view.style){ //设置样式 width = pWidth + "px"; height = pHeight + "px"; top = - pTop + "px "; left = - pLeft + "px"; //切割预览图 clip = "rect(" + pTop + "px " + (pLeft + s.Width) + "px " + (pTop + s.Height) + "px " + pLeft + "px)"; } 这里有点烦乱，但应该不难理解就不详细说明了。 【图片大小】 容器的大小一般是固定的，但图片的大小就不是固定的，这里又可以使用SetSize程序用来设置图片大小： Code var s = this.GetSize(this._tempImg.width, this._tempImg.height, this.Width, this.Height); //设置底图和切割图 this._layBase.style.width = this._layCropper.style.width = s.Width + "px"; this._layBase.style.height = this._layCropper.style.height = s.Height + "px"; 有了图片大小就可以用来设置拖放和缩放的范围限制了： Code this._drag.mxRight = s.Width; this._drag.mxBottom = s.Height; if(this.Resize){ this._resize.mxRight = s.Width; this._resize.mxBottom = s.Height; } ps：程序中的Init程序是用来把个性设置呈现出来，所以一般设置过属性之后（例如图片地址、透明度等）就执行一次Init程序就可以显示效果了。 【ie6渲染bug】 在拖放效果中说到插入一个div解决ie的透明背景bug，这里就需要修复这个bug。 跟缩放效果配合使用时，不得不说ie6的一个渲染bug，用下面的代码测试（ie6）： Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <body> <div id="aa" style="width:300px;height:100px;border:1px solid;"><div style="background:#00f;height:100%;"></div></div> <script>setTimeout("aa.style.height=200",0)</script> </body> </html> 可以对比ie7的效果，可以看出里面的div虽然高度设置了100%，但在外面的div修改高度之后，却不知什么原因没有填充了（外面的div渲染后，没有触发里面的div再渲染）。 解决这个bug的关键是使里面的div能再渲染，这里有几个方法可以解决： 1，设置控制层的overflow为hidden，好处是只需要设置一次，但这个样式会影响其他效果，当然在不影响效果的情况下这个是最好的方法； 2，在缩放的时候，通过修改控制层的某些样式，使里面的div再渲染，这样的样式包括zoom，display（应该还有其他吧）； 3，在缩放的时候，通过修改插入div的某些样式，使其再渲染，这样的样式包括display（zoom也不行）； 程序中是通过修改_layHandle的zoom解决的： if(isIE6){ with(this._layHandle.style){ zoom = .9; zoom = 1; }; }; ps：这个bug的原因貌似跟ie的layout有关，但我查了一下还是没弄清楚，谁有详细的介绍或解析务必跟我分享一下啊。 使用说明 实例化时有三个必要参数：容器对象、控制层、图片地址： var ic = new ImgCropper("bgDiv", "dragDiv", "1.jpg"); 有以下这些可选参数和属性： 属性:默认值//说明 Opacity: 50,//透明度(0到100) Color: "",//背景色 Width: 0,//图片高度 Height: 0,//图片高度 //缩放触发对象 Resize: false,//是否设置缩放 Right: "",//右边缩放对象 Left: "",//左边缩放对象 Up: "",//上边缩放对象 Down: "",//下边缩放对象 RightDown: "",//右下缩放对象 LeftDown: "",//左下缩放对象 RightUp: "",//右上缩放对象 LeftUp: "",//左上缩放对象 Min: false,//是否最小宽高限制(为true时下面min参数有用) minWidth: 50,//最小宽度 minHeight: 50,//最小高度 Scale: false,//是否按比例缩放 Ratio: 0,//缩放比例(宽/高) //预览对象设置 Preview: "",//预览对象 viewWidth: 0,//预览宽度 viewHeight: 0//预览高度
js等比例缩放页面图片大小
07-25
js等比例缩放页面图片大小 // JavaScript Document function handle_img(tagimg_name,tagimg_width,tagimg_height){ var img_object=new Image(); var get_imgs=document.getElementsByName(tagimg_name); for(var i=0 ; i<get_imgs.length ; i++){ img_object.src=get_imgs[i].src; //上传的图片宽高均在tagimg_width和tagimg_height以内。则原图片显示 if(img_object.width<=tagimg_width && img_object.height<=tagimg_height){ get_imgs[i].height=img_object.height; get_imgs[i].width=img_object.width; } //如果宽度超过了tagimg_width if(img_object.width>tagimg_width){ if(tagimg_width/img_object.width*img_object.height>tagimg_height){ var w_width=tagimg_width/img_object.width*img_object.height; get_imgs[i].width=(tagimg_height/w_width)*tagimg_width; get_imgs[i].height=tagimg_height; }else{ get_imgs[i].height=tagimg_width/img_object.width*img_object.height; get_imgs[i].width=tagimg_width; } } //如果高度超过了tagimg_height if(img_object.height>tagimg_height){ if(tagimg_height/img_object.height*img_object.width>tagimg_width){ var h_height=tagimg_height/img_object.height*img_object.width; get_imgs[i].height=(tagimg_width/h_height)*tagimg_height; get_imgs[i].width=tagimg_width; }else{ get_imgs[i].width=tagimg_height/img_object.height*img_object.width; get_imgs[i].height=tagimg_height; } } } } //handle_img(tagimg_name,tagimg_width,tagimg_height) 页面加载完毕后调用该函数即可 //第一个参数为 页面当中img标记的name值 //第二个参数为 将要设定预览图片的宽度 //第三个参数为 将要设定预览图片的高度
JS实现控制图片显示大小的方法【图片等比例缩放功能】
12-12
本文实例讲述了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=utf-8" /> <title>最新javascr
JS实现等比例缩放图片
weixin_42599560的博客
01-09 2266
JS实现等比例缩放图片 有时候我们前端页面只有500×500像素的宽和高的布局，但是后台返回的数据图片是1000×1000，那么这种情况下 如果我直接返回的话 那么图片肯定有一部分没有显示出来，在这种情况下我是想能不能在我们前端开发实现图片等比例缩放。比如如下HTML代码： <div id="demo1"> <img src="http://img01.taobao...
前端学习代码实例-JavaScript 图片等比例缩放裁切详解
qiancheng9998的博客
04-29 1617
本文将通过代码实例详细介绍一下如何实现图片等比例缩放裁切效果。 图片有两种应用方式，一种作为子元素存在，一种是作为背景图片。 在每一种应用方式中，图片的等比例缩放又可以大致分为如下几种情况： （1）.确保图片能够填充满元素，超出的部分被裁切或者隐藏。 （2）.确保图片的长或者宽填充满元素，超出的部分被裁切或者隐藏。 下面通过代码实例分别介绍一下上述列举的中可能，需要的朋友可以做一下参考。 一.作为...
js实现图片的等比例缩放
weixin_33774615的博客
03-06 1930
  js实现图片的等比例缩放 CreateTime--2018年3月6日14:04:18 Author:Marydon 1.代码展示 /** * 图片按宽高比例进行自动缩放 * @param ImgObj * 缩放图片源对象 * @param maxWidth * 允许缩放的最大宽度 * @param maxHeight * 允...
HTML <img> 标签的 height 和 width 属性
weixin_34329187的博客
01-29 1003
定义和用法 &lt;img&gt; 标签的 height 和 width 属性设置图像的尺寸。 提示：为图像指定 height 和 width 属性是一个好习惯。如果设置了这些属性，就可以在页面加载时为图像预留空间。如果没有这些属性，浏览器就无法了解图像的尺寸，也就无法为图像保留合适的空间，因此当图像加载时，页面的布局就会发生变化。（下面的篇幅详细解释了这个观点）。 提示：请不要通过 hei...
css控制图片按等比例缩放实例兼容IE6/IE7/火狐/谷歌
12-13
昨天自己的一个网站需要实现图片等比例缩放，但又不能使用js只能用css控制div中的img为指定大小，下面我找到一段代码分离给大家。   复制代码代码如下:<style type=”text/css”>.thumbImage img{ MAX-WIDTH: 100%!important;HEIGHT: auto!important;width:[removed]this.width > 600 ? “600px” : this.width)!important;} .thumbImage {MARGIN: auto;WIDTH: 600px;} *html.thumbImage img{
js控制页面内图片同宽比例缩小
03-18
NULL 博文链接：https://gbk2312.iteye.com/blog/689144
兼容ie、firefox的图片自动缩放的css跟js代码分享
12-10
这个功能主要是解决内容页中的图片过大撑出，导致页面比较难看，就需要这样的代码，需要的朋友可以参考下 需求：图片width<=600px,height<=800。 1、利用max-width,max-height使图片等比例自动缩放代码： 代码如下: img{max-width: 600px;max-height: 800px;} 由于ie6不支持css max-width,max-height,所以在ie6中需要利用javascript脚本来控制大小。 2、用javascript脚本来兼容ie6，代码如： 代码如下: var img_width = img.OffsetWidth;<BR
css+js完美控制图片大小
12-08
使用js和css讲图片的现实控制在固定的区域内，大于这个区域的等比例缩放，小于这个区域的居中显示。 css+js完美控制图片大小 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
JS控制图片大小（等比例缩放）
09-06
JS控制图片大小（等比例缩放）
JS图片等比例缩放方法完整示例
10-21
主要介绍了JS图片等比例缩放方法,结合完整实例形式分析了javascript针对页面图片元素属性操作的相关技巧,需要的朋友可以参考下
infrared-remote-candroid studiodemo
最新发布
05-05
android studio下载
js利用鼠标来控制图片的放大和缩小代码
06-07
以下是利用JavaScript实现鼠标控制图片放大和缩小的示例代码： ```html <!-- HTML结构 --> ``` ```css /* CSS样式 */ div { width: 500px; height: 500px; overflow: hidden; } img { width: 100%; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值