Question

我正在制作横幅系统，我想检查用户在输入中写入的文本是否是现有图像的URL，然后检测它的高度和宽度。试过这个，但它不起作用：

<div id="image">

</div>
<script>
    function checkimage( me ){
        $("#image").html("<img src=\""+ me +"\" style=\"display: none;\" onload=\"imageready(\""+me+"\")\" />");
    }
    function imageready( me ){
        var ih = $("#image > img").height();
        var iw = $("#image > img").width();
        if(ih == 90 && iw == 728){
            var style = "Leaderboard";
            image.css({"border":"none", "height":"18px", "width":"326px", "outline-color":"#8F8F8F"}); 
        }else if(ih == 600 && iw == 160){
            var style = "wideskyscraper";
            image.css({"border":"none", "height":"18px", "width":"326px", "outline-color":"#8F8F8F"}); 
        }else{
            allow = false;
            image.css({"border":"1px solid #F00", "height":"16px", "width":"324px", "outline-color":"#F00"});
        }
    }
</script>

我看到很多关于is的问题，而且没有一个帮助过。

Answer 1

您可以使用以下内容;

$('<img/>').attr('src','http://explainafide.com.au/wp-content/uploads/2012/10/jquery-logo.png').load(function(){ 
    alert("Height: " + $(this).height() + ", Width:" + $(this).width()); 
}).appendTo("#image_hidden");

以下是一个有效的演示： http://jsfiddle.net/cubuzoa/LmpB6/

替代方式：

您可以提供获取img尺寸的服务;

<强> imgsize.php

<?php
$img = $_GET["img"];

$size = getimagesize($img);

echo json_encode(array("width"=>$size[0], "height"=>$size[1]));

?>

和你的js;

$.getJSON("imgsize.php?img=" + your_image_href, function(response) {
  alert(response);
});

Answer 2

您可以使用图像对象：

，而不是插入DOM来检测图像

function checkimage(me) {
     var img = new Image();  
     img.onload = function () {
         imageready(me);
     }
     img.src = me;
}

Answer 3

你应该回答@ bingjie2680给出的答案）这是您修改后的代码 -

 <html>
 <head>
 <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
 </head>
 <body>
 <div id="image">

 </div>

 <script>
   $(document).ready(function(){
     checkimage("http://www.bhmpics.com/walls/best_wallpapers_for_laptop-wide.jpg"); 
   });

   function checkimage( me ){
         $("#image").html("<img src=\""+ me +"\" style=\"display: none;\" onload=\"imageready(this)\" />");
}
function imageready( me ){

    var ih = $(me).height();
    var iw = $(me).width();
alert("height="+ih+" and width="+iw);
    if(ih == 90 && iw == 728){
        var style = "Leaderboard";
        $('#image').css({"border":"none", "height":"18px", "width":"326px", "outline-color":"#8F8F8F"}); 
    }else if(ih == 600 && iw == 160){
        var style = "wideskyscraper";
        $('#image').css({"border":"none", "height":"18px", "width":"326px", "outline-color":"#8F8F8F"}); 
    }else{
        allow = false;
        $('#image').css({"border":"1px solid #F00", "height":"16px", "width":"324px", "outline-color":"#F00"});
    }
}
 </script>

 </body>
 </html>

Answer 4

没有必要调用两个方法，你可以很容易地使用jQuery：

<强> HTML Code:

<div id="image"></div>

<强> jQuery Code:

function IsValidImageUrl(urlOfImage) {
    $('#image').html($("<img>", {
            src : urlOfImage,
            error : function () {
                // if url is not image
                alert(urlOfImage + ': ' + false);
            },
            load : function () {
                alert(urlOfImage + ': ' + true);
                // get url image height and width
                console.log(this.width + ' x ' + this.height);
                var ih = this.height;
                var iw = this.width;
                if (ih == 90 && iw == 728) {
                    var style = "Leaderboard";
                    $(this).css({
                        "border" : "none",
                        "height" : "18px",
                        "width" : "326px",
                        "outline-color" : "#8F8F8F"
                    });
                } else if (ih == 600 && iw == 160) {
                    var style = "wideskyscraper";
                    $(this).css({
                        "border" : "none",
                        "height" : "18px",
                        "width" : "326px",
                        "outline-color" : "#8F8F8F"
                    });
                } else {
                    allow = false;
                    $(this).css({
                        "border" : "1px solid #F00",
                        "height" : "16px",
                        "width" : "324px",
                        "outline-color" : "#F00"
                    });
                }
            }
        }))
}
// How to use
IsValidImageUrl("https://www.google.com/logos/2012/hertz-2011-hp.gif");
//IsValidImageUrl("http://google.com");a

小提琴DEMO：

如何检查URL是否为图像并检测其高度和宽度

4 个答案: