使用js控制图片尺寸

转载 2006年06月04日 21:30:00
需求:
       用户上传图片后,前台显示,如果不对显示进行控制,图片会变形
    <img id="img1" src="${vo.baby.picPath?if_exists}" border="0" img src="images/blackice.jpg" onload="if(this.width>200 && this.width<300) this.width=300; if(this.width>300) this.width=380;">


用户上传图片的尺寸通常无法控制,(当然你也可以在后台代码中对上传的图片进行处理,这样可以对图片的显示作精细的控制),如果你觉得麻烦的话 ,完全可以通过js作些控制,虽然粗糙但可行且简单。
 
注意对图片的显示最后不要将width和height定死,否则一些怪图片就容易变形,你可以根据需求控制其中某一个,并且再通过onload再作些处理,这样使得图片的显示和原来的图片不会有太大差距。

但使用后发现使用<img>的onload有些问题,在firefox下行为正常,但在IE下行为怪异,大多数情况并没有实现对图片尺寸的控制。不得已只有写body 的onload
onload="if(document.getElementById('img1').width>200 && document.getElementById('img1').width<300) document.getElementById('img1').width=300; if(document.getElementById('img1').width>300) document.getElementById('img1').width=380;"

这样写在IE和firefox下都正常了,不过总是觉得很怪,如果该页面很复杂,加载时间长的话,那么图片的尺寸会有比较长时间的渐变,虽然不理想,但一般情况可以满足

最简单的情况就是不写任何js,直接将img的height或width定死,也可以。但对一些尺寸特殊的情况会有点惨不忍睹

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=754782

js 判断上传图片尺寸大小(var img =new Image())

上传时常常会碰到限制图片尺寸的需求,而在后台通过byte判断大小,虽可行,但如果在JS中判断显然是更好的选择,尤其是在不限制文件大小,只限制尺寸时。  通常会使用创建Image对象,或添加一个来获取,...
  • dcb_ripple
  • dcb_ripple
  • 2016年08月11日 12:25
  • 13083

上传图片时js验证图片大小、尺寸、格式

网上看了很多,自己总结写了些,感觉有点罗嗦,不过还可以用;下面不多说,上代码这是我添加的上传文件按钮 这是js代码...
  • qq_33866778
  • qq_33866778
  • 2017年03月08日 15:31
  • 341

js上传图片进行预览、验证格式及尺寸

var flag = 0; /** * 校验表单 */ function checkForm(){ var idcard =document.getElementById("servertype...
  • u014676619
  • u014676619
  • 2016年05月11日 14:03
  • 3415

JS快速获取图片宽高的方法

快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括IE低版本浏览器。 我们一步...
  • wuchengzhi82
  • wuchengzhi82
  • 2014年03月18日 16:25
  • 29553

通过url获取图片尺寸的几种方法:JS和php

首先是js的方法,通过new一个Image对象,设置src属性,并监听complete和onload事件,图片加载完成后输出图片的宽度和高度 function checkPicurl(url){ ...
  • liuhuoxingkong
  • liuhuoxingkong
  • 2015年02月27日 19:48
  • 2258

javascript 上传图片 检测宽度 高度 文件大小

原文:http://purplebamboo.github.io/2014/02/09/javascript-watch-img-width-height/ 最近做一个iframe上传的...
  • jyb123
  • jyb123
  • 2016年04月18日 15:15
  • 903

JavaScript实现图片预加载,自适应指定尺寸容器

javascript var button = document.getElementById("js_button"); button.on...
  • ernijie
  • ernijie
  • 2016年05月10日 09:45
  • 1512

使用JavaScript解决网页图片拉伸问题

开发网页的过程中经常会因为图片的拉伸问题而苦恼,这里就将介绍如何通过JS来动态的处理网页图片尺寸的问题,让网页不再存在拉伸的图片,让网站更加美观...
  • xiaojimanman
  • xiaojimanman
  • 2016年11月08日 18:30
  • 5308

JS获取上传图片的尺寸和大小

最近工作要用到上传文件时限制上传图片大小这个功能,于是开始找类似的文章,看了很多东西,最后结果到也还可以。   目前来说,谷歌,火狐,IE系列的7,8,9都已经过测试,可以获取到上传图片的原尺寸。接下...
  • qq_33193168
  • qq_33193168
  • 2016年04月07日 20:34
  • 3943

获取网络图片的尺寸大小

在iOS开发过程中经常需要通过网络请求加载图片,有时,需要在创建UIImageView或UIButton来显示图片之前需要提前知道图片的尺寸,根据图片尺寸创建对应大小的控件。但是对于网络图片来说,要想...
  • codeblshi
  • codeblshi
  • 2014年12月20日 11:14
  • 2209
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用js控制图片尺寸
举报原因:
原因补充:

(最多只允许输入30个字)