代碼中的 whImage 函數(shù)是同步的，它使用了 onload 事件來(lái)等待圖像加載完成后再獲取它的寬高震缭。但是草描，在獲取寬高之前函數(shù)就已經(jīng)返回了，因此它會(huì)返回 W / H 的初始值窿祥，這個(gè)值并不是圖像的真實(shí)寬高比。
為了實(shí)現(xiàn)異步獲取圖像寬高比蝙寨，我們可以使用 Promise 對(duì)象來(lái)封裝這個(gè)過程晒衩。在這個(gè)過程中，我們可以使用 resolve 函數(shù)來(lái)返回結(jié)果籽慢，同時(shí)浸遗，由于圖像加載是異步的，我們需要等待 onload 事件觸發(fā)后再執(zhí)行 resolve 函數(shù)箱亿。
代碼示例：
const whImage = (url: any) => {
return new Promise((resolve, reject) => {
const img = new Image();
img.src = url;
img.onload = () => {
const W = img.width;
const H = img.height;
const aspectRatio = W / H;
resolve(aspectRatio);
};
img.onerror = () => {
reject(new Error("Failed to load image"));
};
});
};
注意跛锌，我們將 whImage 函數(shù)改成了返回一個(gè) Promise 對(duì)象。在圖像加載完成后届惋，我們通過調(diào)用 resolve 函數(shù)來(lái)返回寬高比髓帽，并在發(fā)生錯(cuò)誤時(shí)調(diào)用 reject 函數(shù)拋出錯(cuò)誤。這樣脑豹，在使用 whImage 函數(shù)時(shí)郑藏，我們可以使用 Promise.then 方法來(lái)獲取它返回的寬高比。例如：
whImage("/path/to/image.jpg").then(aspectRatio => {
console.log("Aspect ratio:", aspectRatio);
}).catch(error => {
console.error(error);
});
通過這種方式瘩欺，我們就可以實(shí)現(xiàn)異步獲取圖像的寬高比必盖。
