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

Get width height of remote image from url

本文关键字：高度 图像 获取 url 程图像      更新时间：2023-09-26

因此，警报会为宽度和高度提供未定义的值。我认为来自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/

使用JavaScript获取图像大小

为了从图像中读取数据，您需要确保它是首次加载的。以下是一种基于回调的方法和两种基于承诺的解决方案：

回调

const getMeta = (url, cb) => {
  const img = new Image();
  img.onload = () => cb(null, img);
  img.onerror = (err) => cb(err);
  img.src = url;
};
// Use like:
getMeta("https://i.stack.imgur.com/qCWYU.jpg", (err, img) => {
  console.log(img.naturalWidth, img.naturalHeight);
});

使用load事件侦听器（Promise）：

const getMeta = (url) =>
  new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = (err) => reject(err);
    img.src = url;
  });
// Usage example: 
;(async() => {
  const img = await getMeta('https://i.stack.imgur.com/qCWYU.jpg');
  console.dir(img.naturalHeight + ' ' + img.naturalWidth);
})();

使用HTMLImageElement.decode（）（Promise）

const getMeta = async (url) => {
  const img = new Image();
  img.src = url;
  await img.decode();  
  return img
};
// Usage example:
getMeta('https://i.stack.imgur.com/qCWYU.jpg').then(img => {
  console.dir(img.naturalHeight +' '+ img.naturalWidth);
});

  • MDN文档：HTMLImageElement

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

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

ES6

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

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=${w}px, height=${h}px`;
  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=${w}px, height=${h}px`;
  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" />

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

Fiddle：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");

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

您可以尝试打包。

import getImageSize from 'image-size-from-url';
const {width, height} = await getImageSize('URL');
相关文章：