typescript - 我如何在 Angular 中獲取圖片鏈接的寬度和高度？

我需要驗證一個圖片的連結是否為 1000px x 1000px 且為 jpg 格式。

範例：

https://www.w3schools.com/bootstrap/paris.jpg

我有這個連結，我需要獲取這張圖片的寬度和高度。

我相信 JPG 問題應該很容易解決，我會給出最後幾個字符的子字串，但關於圖片大小的問題，我不知道在 Angular 中如何找到。

有人有任何想法嗎？謝謝。

答案＃1

這是 JavaScript 的方法：

function getImageDimenstion(imgUrl){

   let img = new Image(); 

   img.src = imgUrl;
   img.onload = function (event) {
        let  loadedImage = event.currentTarget;
        let width = loadedImage.width;
        let height = loadedImage.height;
        console.log('height: '+height);
        console.log('width: '+width);
   } 
}

const url= "https://www.w3schools.com/bootstrap/paris.jpg";
getImageDimenstion(url);

Angular 的工作範例：

運作示範

答案＃2

我想分享我對這個問題的解決方案，因為我被卡在無法在其他人解決方案中提供的回調函數外訪問圖像的高度和寬度。這是對我有效的解決方案：

let img = new Image();
img.src = "https://yourImageSource";

現在，如果你想使用圖片的高度/寬度，只需使用 img.naturalHeight 和 img.naturalWidth。

注意：在我的 Angular 專案中可在現代瀏覽器中運作。