Untitled

import React, { useEffect, useState } from 'react';
import imageCompressor from 'image-compressor';
import './ImageFetcher.css';

const ImageFetcher = () => {
  const [fetchedImages, setFetchedImages] = useState([]);

  useEffect(() => {
    const fetchAndDecompressImages = async () => {
      // Fetch stored images from local storage
      const storedImages = localStorage.getItem('uploadedImages');

      // Parse stored base64 strings
      if (storedImages) {
        const base64Images = JSON.parse(storedImages);
        const decompressedImages = await Promise.all(base64Images.map(decompressImage));
        setFetchedImages(decompressedImages);
      }
    };

    fetchAndDecompressImages();
  }, []);

  const decompressImage = async (base64String) => {
    const compressedImageBlob = await fetch(base64String).then((res) => res.blob());
    const decompressedImage = await imageCompressor(compressedImageBlob, { quality: 1 });
    return URL.createObjectURL(decompressedImage);
  };

  return (
    <div className="image-grid-container">
      <h2>Fetched Images</h2>
      <div className="image-grid">
        {fetchedImages.map((imageSrc, index) => (
          <div key={index} className="image-item">
            <img src={imageSrc} alt={`Uploaded ${index}`} />
          </div>
        ))}
      </div>
    </div>
  );
};

export default ImageFetcher;