如何通过它来了解图像的大小

时间:2012-08-13 13:02:41

标签: javascript dom image-loading

我有一个输入文本字段,用户提供图像的源URL, 例如http://mysite/images/STARTPAGE_LOGO.gif是有效值。

我的html文档中没有任何img标记或其他内容。如何确定用户输入的URL中显示的图像尺寸。

2 个答案:

答案 0 :(得分:12)

没有方法可以在不加载图像的情况下找出图像的宽度和高度,因此您必须动态加载图像,并且可以使用

function getDimensions(_src,_callback){
     /* create a new image , not linked anywhere in document */
     var img = document.createElement('img');
     /* set the source of the image to what u want */
     img.src=_src;
     /* Wait the image to load and when its so call the callback function */
     /* If you want the actual natural dimensions of the image use naturalWidth and natural height instead */
     img.onload = function () { _callback(img.width,img.height) };
}

在纯javascript精神中声明上述功能后,您可以执行类似

的操作
getDimensions('http://mysite/images/STARTPAGE_LOGO.gif',function(w,h){
 console.log( "Height : ",h,"Width:",w);
});

答案 1 :(得分:-3)

HTML:

   <input id="src" type="text" value="https://www.google.pl/images/srpr/logo3w.png"/>

JAVASCRIPT:

var img = new Image; // create tmp image element  
                     // is equal to document.createElement('img');

onload事件的绑定功能,加载图像时会自动调用。

   img.onload = function(){
     alert( this.width +" : " + this.height );
   }; 

设置图像来源;

img.src = document.getElementById('src').value // get the value of input element;

jQuery的好奇心:

$('<img/>').attr('src',$('#src').val()).bind('load',function(){
     alert( this.width +' x ' + this.height );
});