從 React Native 中的 blob 獲取圖像尺寸

Question

假設我正在調用 API，它提供隨機尺寸的圖像。 我需要在渲染之前知道每個圖像的寬度和高度，因為我需要為我想要的精確布局做一些計算。

使用 Web APIs，我做了這個，它工作正常：

const res = await fetch("https://picsum.photos/200/300");
const blob = await res.blob();
const img = new Image();
img.src = URL.createObjectURL(blob);
console.log(img.src);
img.onload = () => {
  console.log(img.width, img.height);
};

問題是使用 React Active，我們無法訪問 Web Api Image Object。 Image是 React Native 上的一個組件。

這是我所在的位置：

const res = await fetch("https://picsum.photos/200/300");
const blob = await res.blob();

所以基本上二進制數據現在存儲在 RAM 中，但我找不到任何方法將這些數據解釋為圖像並獲取尺寸。

Answer 1

React Native Image 組件有內置的 getSize 方法。 如果您可以將 blob 轉換為 URI，則可以使用下面的代碼。

 Image.getSize(myUri, (width, height) => { console.log(width, height)});