js判断图片是否加载完成并获取图片的宽度

作者:杏彩彩票app下载

web开发过程中经常会碰到内容区被客户上传的图片撑破的情况,高度还好说,主要是宽度了,如果直接将相机拍下的图片不经过任何处理直接传到网站上,也不规定图片宽度的情况下,网站的内容区域必然变形走样,下面我们就来看看如何在前台用jquery批量处理这些过宽的图片。

做web的同学们经常会碰到客户上传图片将网页内容区撑破了的情况,下面就这个问题我们一种如何使用js处理这个问题的方法,具体思路就是在js判断客户端的图片下载完毕之后适时的对该图片的宽度或者高度做一些处理,js处理图片主要是利用javascript中Image对象,通过 onload 事件和 onreadystatechange 来进行判断。

动态加载的js代码,如果网页中包含有jquery代码,一般首先需要判断一下页面是否有加载Jquery文件,如果加载了,直接写js代码,如果没有加载,还得先加载一下jquery代码,然后才可以使用一些jquery的方法。

现在假设内容区div的 id="phpernote",即:

(1)第一中方法,通过onload事件,比如:

注意此处说的动态加载js代码是针对如下这种情况的:

<div id="phpernote"><?php echo $news['content'];?></div>
<script type="text/javascript">
var obj=new Image();
obj.src="http://www.phpernote.com/uploadfiles/editor/201107240502201179.jpg";
obj.onload=function(){
 alert('图片的宽度为:'+obj.width+';图片的高度为:'+obj.height);
 document.getElementById("mypic").innnerHTML="<img src='"+this.src+"' />";
}
</script>
<div id="mypic">onloading……</div>
<script type="text/javascript" src="http://www.phpernote.com/echoJs.php"></script>
<!--echoJs.php文件中的代码输出的是js代码-->

本文由杏彩发布,转载请注明来源

关键词: