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>

  • 相关阅读:
    Golang 学习之路
    Kubernetes 资源对象之DaemonSet
    Spring Cloud服务注册中心交付至kubernetes
    自动化运维之Ansible入门
    MySQL 高可用之主从复制
    Kubernetes 强大的namespace
    SaltStack RESTful API操作
    Kubernetes 服务自动发现CoreDNS
    2个月……
    一次游玩与这两周的一些感想
  • 原文地址:https://www.cnblogs.com/xingmeng/p/2395651.html
Copyright © 2011-2022 走看看