使用js控制图片尺寸

原创 2006年05月25日 15:08: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定死,也可以。但对一些尺寸特殊的情况会有点惨不忍睹
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

js缩放图片尺寸函数

js自动修改图片尺寸

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

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

MWPhotoBrowser的基本使用及图片尺寸的更改

MWPhotoBrowser的基本使用及图片尺寸的更改,SDWebImage加载大图时内存警告的问题

android 裁剪图片大小 控制图片尺寸 .

用BitmapFactory获取适合屏幕大小的图片 和自带的图片裁剪工具 [java] view plaincopyprint?    [java] view plain...

批量修改图片尺寸

  • 2017-03-31 11:05
  • 104KB
  • 下载

图像金字塔:高斯金字塔、拉普拉斯金字塔与图片尺寸缩放

这篇文章里,我们将一起探讨图像金字塔的一些基本概念,如何使用OpenCV函数 pyrUp 和 pyrDown 对图像进行向上和向下采样,以及了解了专门用于缩放图像尺寸的resize函数的用法。此博...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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