夏日博客

A-A+

js 获取图片大小代码总结

2016年10月16日 前端设计 暂无评论 阅读 7 views 次

在js中获取图片大小分为图片高度 宽度，另一种图片大小是指图片多少KB或多少MB了，下面我来给各位朋友总结了一些常用的获取图片大小的js代码。

获取图片的长度与宽度,代码如下:

  1. <img src="logo.gif" id="imageE">    
  2.  <script>  
  3.         function getImageSize(imgE){  
  4.              var i = new Image(); //新建一个图片对象  
  5.               i.src = imgE.src;//将图片的src属性赋值给新建的图片对象的src  
  6.               return new Array(i.width,i.height);  
  7.         }    
  8. </script>  

调用方式,代码如下:

  1. <script>  
  2.         var imageE = document.getElementById("imageE"),  
  3.         imageSize = getImageSize(imageE),  
  4.         imgwidth = imageSize[0],  
  5.         imgheight = imageSize[1];  
  6.        测试方式：  
  7.       console.log(imgwidth);  
  8.      console.log(imgheight);  
  9.    </script>  

获取图片大小KB，MB形式,代码如下:

  1. <input type="file" onchange="checkSize()" id="f"/>  
  2. <script type="text/javascript">  
  3. var ie=!-[1,];   //区分ie  
  4. function checkSize(){  
  5. var f=document.getElementByIdx_x("f");  
  6. if(ie){  
  7. var img=new Image();//动态创建img  
  8. img.src=f.value;  
  9. img.style.display="none";  
  10. img.onreadystatechange=function(){  
  11. if(img.readyState=='complete'){//当图片load完毕  
  12. alert(img.fileSize);//ie获取文件大小  
  13. }  
  14. }  
  15. document.body.removeChlid(img);//获取大小结束，移除图片  
  16. }  
  17. else{  
  18. var fv=f.files[0].size;//火狐等标准取值办法  
  19. alert(fv);//xiariboke.net  
  20. }  
  21. }  
  22. </script>  

根据上面的实例我们来做一个利用获取图片大小功能来对图片上传之前进行预览效果,代码如下:

  1. <HTML>   
  2. <HEAD>   
  3. <TITLE>演示图片等比例缩小</TITLE>   
  4. <script>   
  5. function Wa_SetImgAutoSize(img)   
  6. {   
  7. //var img=document.all.img1;//获取图片   
  8. var MaxWidth=200;//设置图片宽度界限   
  9. var MaxHeight=100;//设置图片高度界限   
  10. var HeightWidth=img.offsetHeight/img.offsetWidth;//设置高宽比   
  11. var WidthHeight=img.offsetWidth/img.offsetHeight;//设置宽高比   
  12. alert("test"+img.offsetHeight+img.fileSize);  
  13. if(img.offsetHeight>1) alert(img.offsetHeight);  
  14. if(img.readyState!="complete"){  
  15.  return false;//确保图片完全加载  
  16. }  
  17. if(img.offsetWidth>MaxWidth){   
  18. img.width=MaxWidth;   
  19. img.height=MaxWidth*HeightWidth;   
  20. }   
  21. if(img.offsetHeight>MaxHeight){   
  22. img.height=MaxHeight;   
  23. img.width=MaxHeight*WidthHeight;   
  24. }   
  25. }  
  26. function CheckImg(img)   
  27. {   
  28.  var message="";  
  29.  var MaxWidth=1;//设置图片宽度界限   
  30.  var MaxHeight=1;//设置图片高度界限   
  31.    
  32.  if(img.readyState!="complete"){  
  33.   return false;//确保图片完全加载  
  34.  }  
  35.  if(img.offsetHeight>MaxHeight) message+="r高度超额："+img.offsetHeight;  
  36.  if(img.offsetWidth>MaxWidth) message+="r宽度超额："+img.offsetWidth;  
  37.  if(message!="") alert(message);  
  38. }   
  39. </script>   
  40. </HEAD>   
  41. <BODY>   
  42. <img src="images/frequency.gif" border=0 id="img1" onload="CheckImg(this);">   
  43. <br>   
  44. <input id=inp type="file" onpropertychange="img1.src=this.value;">   
  45. </BODY>   
  46. </HTML>  
标签：

给我留言