如何在react中从URL中获取exif数据？

import React, { useEffect, useState } from "react";
import exif from "exif-js";

const ImageWithExif = () => {
  const [exifData, setExifData] = useState(null);

  useEffect(() => {
    const getExifData = async () => {
      // 1. 获取URL参数
      const searchParams = new URLSearchParams(window.location.search);
      const imageUrl = searchParams.get("image");

      if (imageUrl) {
        try {
          // 2. 发送GET请求获取图片数据
          const response = await fetch(imageUrl);
          const blob = await response.blob();

          // 3. 使用exif-js库解析EXIF数据
          exif.getData(blob, function() {
            const data = exif.getAllTags(this);
            setExifData(data);
          });
        } catch (error) {
          console.error("Error fetching image or parsing EXIF data:", error);
        }
      }
    };

    getExifData();
  }, []);

  return (
    <div>
      {exifData ? (
        <pre>{JSON.stringify(exifData, null, 2)}</pre>
      ) : (
        <p>No EXIF data available.</p>
      )}
    </div>
  );
};

export default ImageWithExif;