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

Posted 2023-03-06

【中文标题】从 url 获取远程图像的宽度高度

【英文标题】：Get width height of remote image from url

【发布时间】：2012-07-11 15:57:19

【问题描述】：

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

【问题讨论】：

它不工作的原因是因为当你return你的宽度和高度值时它们还不知道。您需要在onload 回调中处理inside 的结果。您可能应该将回调函数作为 getMeta 函数的第二个参数。

【参考方案1】：

使用 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 不能不调用 .load 函数内的某个函数 --- 或 setInterval，因为当您的代码被读取和执行时，图像仍在加载：Interval 将检查直到图像像在这个演示中一样加载并自行清除：jsfiddle.net/roXon/SN2t6/1

@Wonka 看看这里 图片一加载就调用一个函数： jsfiddle.net/roXon/SN2t6/4

请注意，对于 IE11 中的 SVG 图像，宽度和高度返回为 0

@RokoC.Buljan，来自 jQuery 部分的代码抛出错误：Uncaught TypeError: url.indexOf is not a function。我认为一个小错误潜入其中，即img 属性和侦听器位于同一个对象中。见this answer

【参考方案2】：

img.onload 函数中的 w 和 h 变量与 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");

【讨论】：

谢谢，这按预期工作，只是获取信息的时间太长了

如果图像尚未存储在浏览器的缓存中，此解决方案将不起作用。您必须接受 getMeta 中的回调函数，该函数将在 onload 事件触发时调用 (jsfiddle.net/28UES)

@Zack hmmm.. 由于没有返回宽度和高度，我怎样才能让它们返回以在函数外使用？

@Wonka 更新了我的答案。一旦定义了回调函数，您就可以将变量传递给它并在回调函数中操作它们。

@Zack 我看到了更新，它解决了缓存问题。但是你能展示如何访问函数之外的宽度和高度吗？我需要该函数在自身之外返回值。

【参考方案3】：

只需像这样将回调作为参数传递：

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') 
);

【讨论】：

谢谢，这对我很有帮助。

请注意，对于 IE11 中的 SVG 图像，宽度和高度返回为 0

【参考方案4】：

ES6

使用async/await，您可以以类似序列的方式在getMeta 函数下方执行操作，您可以按如下方式使用它（这与您问题中的代码几乎相同（我添加await 关键字并更改变量end到img，并将var 更改为let 关键字）。您需要通过await 运行getMeta 仅从async 函数（运行）。

function getMeta(url) 
    return new Promise((resolve, reject) => 
        let img = new Image();
        img.onload = () => resolve(img);
        img.onerror = () => reject();
        img.src = url;
    );


async function run() 

  let img = await getMeta("http://shijitht.files.wordpress.com/2010/08/github.png");

  let w = img.width;
  let h = img.height; 

  size.innerText = `width=$wpx, height=$hpx`;
  size.appendChild(img);


run();

<div id="size" />

Rxjs

const  race, fromEvent, map, mergeMap, of  = rxjs;

function getMeta(url) 
    return of(url).pipe(
        mergeMap((path) => 
            const img = new Image();
            let load = fromEvent(img, 'load').pipe(map(_=> img))
            let error = fromEvent(img, 'error').pipe(mergeMap((err) => throwError(() => err)));
            img.src = path;
            
            return race(load, error);
        )
    );



let url = "http://shijitht.files.wordpress.com/2010/08/github.png";

getMeta(url).subscribe(img=>  
  let w = img.width;
  let h = img.height; 

  size.innerText = `width=$wpx, height=$hpx`;
  size.appendChild(img);
, e=> console.log('Load error'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/7.5.2/rxjs.umd.min.js" integrity="sha512-wBEi/LQM8Pi08xK2jwHJNCiHchHnfcJao0XVQvkTGc91Q/yvC/6q0xPf+qQr54SlG8yRbRCA8QDYrA98+0H+hg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div id="size" />

【讨论】：

谢谢。我使用 Promise.all() 一次获取所有值。

【参考方案5】：

使用 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());
        ,
    );