zoukankan      html  css  js  c++  java
  • 利用js获取图片尺寸与图片大小(高度与宽度)

    利用获取图片尺寸与图片大小(高度宽度)要注意一点的是要等 图片加载完成后才能js 获取图片宽度与高度的,所以要判断在readystate=="complete"的状态下获取大小,如果是利用file上传的话,每次都要点击清除 image=new image();  imgage.width与高度哦。
    <!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=gb2312" />
    <title>js获取图片尺寸与图片大小(高度与宽度)</title>
    <script>
    function checkimg(img)

    {
     var message="";
     var maxwidth=1;//设置图片宽度界限
     var maxheight=1;//设置图片高度界限

     if(img.readystate!="complete"){

      return false;//确保图片完全加载

     }
     if(img.offsetheight>maxheight) message+="r高度超额:"+img.offsetheight;
     if(img.offsetwidth>maxwidth) message+="r宽度超额:"+img.offsetwidth;
     if(message!="") alert(message);
    }

    </script>
    </head>
    <body>
    <img src="http://jz345.net/images/frequency.gif" border=0 id="img1" onload="checkimg(this);">
    <br> <input id=inp type="file" onpropertychange="img1.src=this.value;">
    </body>
    图片加载完成后才能成功获取图片大小,所以要判断在readystate=="complete"的状态下获取大小

    测试代码
    <script>
    function qford_getimagesize(filepath)  
        {  
            var imgsize={  
            0,  
            height:0  
            };  
             image=new image();  
            image.src=filepath;  
            imgsize.width =image .width;  
            imgsize .height=image .height;  
            return imgsize;  
        }  

    </script>

    js获取图片尺寸函数测试:</br>  
    <img src="test.jpg" mce_src="test.jpg" />  
    <script type="text/网页特效"><!--  
    var a=qford_getimagesize("test.jpg");  
    alert('宽:'+a.width +'  高:'+a.height);
    </script>

  • 相关阅读:
    服务端渲染
    node基础
    vue不同组件间的通信
    mui底部导航栏
    在mui中引入自定义的字体图标
    axios的使用
    vue多视图
    多元线性回归:波士顿房价预测问题TesnsorFlow实战
    MNIST手写数字识别:分类应用入门(实践篇)
    7-3 java高级 22_19寻找最大块的问题 (20 分)
  • 原文地址:https://www.cnblogs.com/xingmeng/p/2395651.html
Copyright © 2011-2022 走看看