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

IT技术 javascript image height width
2021-01-27 00:47:28

所以警报给出了宽度和高度的未定义值。我认为来自 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/

5个回答

使用 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){   
    const 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

@Wonka 在此处查看加载图像后立即调用函数： jsfiddle.net/roXon/SN2t6/4
2021-03-16 00:47:28
@Wonka 不是没有调用函数内部的某些函数.load--- 或 setInterval，导致在读取和执行代码时，图像仍在加载：Interval 将检查直到图像加载并像在此演示中一样自行清除：jsfiddle .net/roXon/SN2t6/1
2021-03-18 00:47:28
请注意，宽度和高度0与 IE11 中的 SVG 图像一样
2021-03-21 00:47:28
由于宽度和高度没有被返回，我怎样才能让它们返回到函数之外使用？
2021-04-03 00:47:28
@ RokoC.Buljan，从jQuery截面的代码引发错误：Uncaught TypeError: url.indexOf is not a function。我认为其中有一个小错误，即img属性和侦听器落在同一个对象中。看到这个答案
2021-04-11 00:47:28

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

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

请注意，宽度和高度0与 IE11 中的 SVG 图像一样
2021-04-03 00:47:28
谢谢，这对我帮助很大。
2021-04-09 00:47:28

ES6：使用async/await你可以做下面getMeta的序列，例如单向函数和如下（我加你可以用它（这是你的问题几乎相同的代码await关键字和变化的变量end来img，并改变var以let关键字），您需要运行。getMeta由await仅来自async函数（运行）。

显示代码片段

函数中的w和h变量与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");
谢谢，这按预期工作，只是需要太长时间才能获取信息
2021-03-18 00:47:28
@Zack 我看到了解决缓存问题的更新。但是你能展示如何在函数外访问宽度和高度吗？我需要函数返回自身之外的值。
2021-03-24 00:47:28
@Wonka 更新了我的答案。一旦你定义了一个回调函数，你就可以将变量传递给它并在回调函数中操作它们。
2021-03-25 00:47:28
如果图像尚未存储在浏览器的缓存中，则此解决方案将不起作用。您必须在 getMeta 中接受一个回调函数，该函数将在 onload 事件触发时被调用 ( jsfiddle.net/28UES )
2021-04-05 00:47:28
@Zack 嗯.. 由于没有返回宽度和高度，我怎样才能让它们返回到函数之外使用？
2021-04-06 00:47:28

使用 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());
        },
    });
}
其它你可能感兴趣的问题
上一篇如何让浏览器等待页面完全加载后才显示？ 下一篇JavaScript 中 void 运算符的重点是什么？