feat: Add function to get base64 image dimensions

BananasDev0 · Aug 6, 2024 · 0a60acc · 0a60acc
1 parent 933d82d
commit 0a60acc
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 45 deletions.
diff --git a/src/components/ImageGallery.jsx b/src/components/ImageGallery.jsx
@@ -2,44 +2,62 @@ import { Box, Grid, Paper, IconButton } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
 import { Gallery, Item } from 'react-photoswipe-gallery';
 import 'photoswipe/dist/photoswipe.css';
+import { useEffect, useState } from 'react';
+import { getBase64ImageDimensions } from '../util/generalUtils';
 
 const ImageGallery = ({ images, onImageDeleted, readOnly = false }) => {
+    const [imageDimensions, setImageDimensions] = useState([]);
+
+    useEffect(() => {
+        const fetchDimensions = async () => {
+            const dimensionsPromises = images.map(image => getBase64ImageDimensions(image));
+            const dimensions = await Promise.all(dimensionsPromises);
+            setImageDimensions(dimensions);
+        };
+
+        fetchDimensions();
+    }, [images]);
+
     const handleDeleteImage = (index) => {
         if (!readOnly) {
             onImageDeleted(index);
         }
     };
 
     return (
-        <Gallery>
+        <Gallery options={{
+            wheelToZoom: true,
+        }}>
             <Grid container spacing={2} justifyContent="center" alignItems="center">
                 {/* Imagen principal */}
                 {images.slice(0, 1).map((image, index) => (
                     <Grid item xs={12} key={index} display="flex" justifyContent="center">
                         <Box sx={{ position: 'relative', display: 'inline-block' }}>
-                            <Item
-                                original={image}
-                                thumbnail={image}
-                                width="1024"
-                                height="768"
-                            >
-                                {({ ref, open }) => (
-                                    <Box
-                                        ref={ref}
-                                        onClick={open}
-                                        component="img"
-                                        src={image}
-                                        sx={{
-                                            maxWidth: '100%',
-                                            maxHeight: '400px',
-                                            width: 'auto',
-                                            height: 'auto',
-                                            borderRadius: '4px',
-                                            cursor: 'pointer',
-                                        }}
-                                    />
-                                )}
-                            </Item>
+                            {imageDimensions[index] && (
+                                <Item
+                                    original={image}
+                                    thumbnail={image}
+                                    width={imageDimensions[index].width}
+                                    height={imageDimensions[index].height}
+                                >
+                                    {({ ref, open }) => (
+                                        <Box
+                                            ref={ref}
+                                            onClick={open}
+                                            component="img"
+                                            src={image}
+                                            sx={{
+                                                maxWidth: '100%',
+                                                maxHeight: '400px',
+                                                width: 'auto',
+                                                height: 'auto',
+                                                borderRadius: '4px',
+                                                cursor: 'pointer',
+                                            }}
+                                        />
+                                    )}
+                                </Item>
+                            )}
                             {!readOnly && (
                                 <IconButton
                                     onClick={() => handleDeleteImage(index)}
@@ -58,27 +76,29 @@ const ImageGallery = ({ images, onImageDeleted, readOnly = false }) => {
                         <Grid item key={index}>
                             <Box sx={{ position: 'relative', width: '120px', height: '120px' }}>
                                 <Paper elevation={2} sx={{ width: '100%', height: '100%', overflow: 'hidden', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-                                    <Item
-                                        original={image}
-                                        thumbnail={image}
-                                        width="1024"
-                                        height="768"
-                                    >
-                                        {({ ref, open }) => (
-                                            <Box
-                                                ref={ref}
-                                                onClick={open}
-                                                component="img"
-                                                src={image}
-                                                sx={{
-                                                    width: 'auto',
-                                                    height: '100%',
-                                                    borderRadius: '4px',
-                                                    cursor: 'pointer',
-                                                }}
-                                            />
-                                        )}
-                                    </Item>
+                                    {imageDimensions[index + 1] && (
+                                        <Item
+                                            original={image}
+                                            thumbnail={image}
+                                            width={imageDimensions[index + 1].width}
+                                            height={imageDimensions[index + 1].height}
+                                        >
+                                            {({ ref, open }) => (
+                                                <Box
+                                                    ref={ref}
+                                                    onClick={open}
+                                                    component="img"
+                                                    src={image}
+                                                    sx={{
+                                                        width: 'auto',
+                                                        height: '100%',
+                                                        borderRadius: '4px',
+                                                        cursor: 'pointer',
+                                                    }}
+                                                />
+                                            )}
+                                        </Item>
+                                    )}
                                     {!readOnly && (
                                         <IconButton
                                             onClick={() => handleDeleteImage(index + 1)}

diff --git a/src/util/generalUtils.js b/src/util/generalUtils.js
@@ -66,4 +66,15 @@ export const base64ToBlob = (base64) => {
 export const extractMainTitle = (title) => {
   const match = title.match(/^[^()]+/);
   return match ? match[0].trim() : title;
+};
+
+export const getBase64ImageDimensions = (base64String) => {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => {
+      resolve({ width: img.width, height: img.height });
+    };
+    img.onerror = reject;
+    img.src = base64String;
+  });
 };