从URL获取远程图像的宽度高度


71

因此,警报为宽度和高度提供了未定义的值。我认为img.onload计算中图像的w和h值未传递给要返回的值,或者可能在onload计算它们之前返回了w和h :

function getMeta(url){
 var w; var h;
 var img=new Image;
 img.src=url;
 img.onload=function(){w=this.width; h=this.height;};
 return {w:w,h:h}    
}

// "http://snook.ca/files/mootools_83_snookca.png" //1024x678
// "http://shijitht.files.wordpress.com/2010/08/github.png" //128x128

var end = getMeta("http://shijitht.files.wordpress.com/2010/08/github.png");
var w = end.w;
var h = end.h;
alert(w+'width'+h+'height');

如何让警报显示正确的宽度和高度?

http://jsfiddle.net/YtqXk/


2
它不起作用的原因是,在return您尚未知道宽度和高度值的时候。您需要在回调内部处理结果onload。您可能应该使回调函数成为函数的第二个参数getMeta
powerbuoy 2012年

Answers:


130

使用jQuery获取图像大小

function getMeta(url){
    $("<img/>",{
        load : function(){
            alert(this.width+' '+this.height);
        },
        src  : url
    });
}

使用JavaScript获取图像大小

function getMeta(url){   
    var img = new Image();
    img.onload = function(){
        alert( this.width+' '+ this.height );
    };
    img.src = url;
}

使用JavaScript获取图像大小(现代浏览器,IE9 +)

function getMeta(url){   
    var img = new Image();
    img.addEventListener("load", function(){
        alert( this.naturalWidth +' '+ this.naturalHeight );
    });
    img.src = url;
}

只需将以上内容用作: getMeta( "http://example.com/img.jpg" );

https://developer.mozilla.org/en/docs/Web/API/HTMLImageElement


1
由于未返回宽度和高度,我如何让它们在函数外部使用?
万卡

3
@Wonka并非没有在.load函数---或setInterval中调用某些函数,原因是在读取和执行代码时,图像仍在加载:Interval会检查图像直到加载完毕
Roko C. Buljan 2012年

2
@Wonka会在图像加载后立即 在此处调用函数:jsfiddle.net/roXon/SN2t6/4
Roko C. Buljan 2012年

需要注意的是宽度和高度回来如0在IE11 SVG图像
山姆

@ RokoC.Buljan,jQuery部分中的代码引发错误:Uncaught TypeError: url.indexOf is not a function。我认为其中有些错误,即img属性和侦听器位于同一对象中。看到这个答案
almaceleste

24

只需将回调作为参数传递如下:

function getMeta(url, callback) {
    var img = new Image();
    img.src = url;
    img.onload = function() { callback(this.width, this.height); }
}
getMeta(
  "http://snook.ca/files/mootools_83_snookca.png",
  function(width, height) { alert(width + 'px ' + height + 'px') }
);


谢谢,这对我有很大帮助。
迈克尔

需要注意的是宽度和高度回来如0在IE11 SVG图像
山姆

14

ES6:使用async/await你可以做下面getMeta的序列,例如单向函数和如下(我加你可以用它(这是你的问题几乎相同的代码await关键字和变化的变量endimg,并改变varlet关键字),您需要运行。getMetaawait仅从async功能(运行)开始。


11

函数中的wh变量与img.onload函数中的变量不在同一范围内getMeta()。一种方法如下:

小提琴http : //jsfiddle.net/ppanagi/28UES/2/

function getMeta(varA, varB) {
    if (typeof varB !== 'undefined') {
       alert(varA + ' width ' + varB + ' height');
    } else {
       var img = new Image();
       img.src = varA;
       img.onload = getMeta(this.width, this.height);
    }
}


getMeta("http://snook.ca/files/mootools_83_snookca.png");

谢谢,这按预期工作,只是花了一点时间才能获得信息
Wonka

1
如果图像尚未存储在浏览器的缓存中,则此解决方案将不起作用。你必须接受getMeta一个回调函数将被调用时,onload事件火灾(jsfiddle.net/28UES
拉斯费里

@Zack hmmm ..由于未返回宽度和高度,我如何让它们在函数外部使用?
万卡

@Wonka更新了我的答案。一旦定义了回调函数,就可以将其传递给变量并在回调函数中对其进行操作。
Panagiotis Panagi 2012年

@Zack我看到了更新,该更新解决了缓存问题。但是您可以显示如何在函数外部访问宽度和高度。我需要该函数返回自身之外的值。
万卡

0

使用jQuery获取图像大小
(取决于哪种格式化方法更适合您的偏好):

function getMeta(url){
    $('<img/>',{
        src: url,
        on: {
            load: (e) => {
                console.log('image size:', $(e.target).width(), $(e.target).height());
            },
        }
    });
}

要么

function getMeta(url){
    $('<img/>',{
        src: url,
    }).on({
        load: (e) => {
            console.log('image size:', $(e.target).width(), $(e.target).height());
        },
    });
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.