JS 获取远程图片的长和宽

11 min read
function getImageDimensions(imageURL) {
    const img = new Image();
    return new Promise((resolve, reject) => {
        img.onload = () => resolve({ width: img.width, height: img.height });
        img.onerror = reject;
        img.src = imageURL;
    });
}

getImageDimensions(imageURL)是一个返回一个Promise对象的异步函数,它接收一个imageURL参数,该参数表示图像的URL地址。该函数将返回一个解析后的对象,该对象包含图像的宽度和高度。

在该函数中,将创建一个新的Image对象并设置其onload事件处理程序以在图像加载完成后解析其尺寸。如果加载过程中出现错误,则会在img.onerror事件处理程序中拒绝Promise。最后,设置img.src属性以触发图像加载过程。

因为该函数是异步的,所以当它被调用时,将返回一个Promise对象。当Promise被解决时,将传递一个包含图像宽度和高度的解析对象。如果Promise被拒绝,则会抛出一个错误,可以使用.catch()方法处理该错误。

一旦img.src被设置,浏览器将开始请求该图像文件,并开始下载。一旦下载完成,浏览器将触发img.onload事件处理程序,从而可以获取图像的宽度和高度等信息。

需要注意的是,由于图像下载是异步进行的,因此在图像加载完成之前,代码可能会继续执行。如果需要在图像加载完成后执行某些操作,则需要在img.onload事件处理程序中执行这些操作。