Skip to content

86b2kunbc-base64-enhancement: Implemented API route to fetch and serve base64 image strings from images.json #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
LakshananS wants to merge 2 commits into
base: development
Choose a base branch
from
Open

86b2kunbc-base64-enhancement: Implemented API route to fetch and serve base64 image strings from images.json #6

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e7fe60f
86b2kunbc-base64-enhancement: Implemented API route to fetch and serv…
LakshananS Oct 24, 2024
d3a9016
86b2kunbc-base64-enhancement: Images used in the carousel are proper…
LakshananS Oct 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 46 additions & 4 deletions venue-reservation/src/components/venue_card/user_venue_card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,22 @@ interface ImageData {
base64: string;
}


const VenueCard = () => {
const [images, setImages] = useState<string[]>([]);

// Fetch the images from the API route
// Fetch the images from the API route
useEffect(() => {
const fetchImages = async () => {
try {
const response = await fetch('/api/images');
const data = await response.json();
const base64Images = data.images.map((image: ImageData) => image.base64);
setImages(base64Images);

// Process images and resize them
const resizedBase64Images = await Promise.all(
Copy link
Contributor

@bsaranga bsaranga Oct 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not what I meant. Don't resize the image when loading it in the component. Resize and store the image as base64 in the json file. Hope you got it.

Copy link
Contributor

@bsaranga bsaranga Oct 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Goal of resizing the image is to reduce the base64 string length

data.images.map((image: ImageData) => resizeImage(image.base64, 600, 400))
);

setImages(resizedBase64Images);
} catch (error) {
console.error('Failed to fetch images:', error);
}
Expand All @@ -28,6 +32,44 @@ const VenueCard = () => {
fetchImages();
}, []);

// Function to resize the image and return base64
const resizeImage = async (base64: string, maxWidth: number, maxHeight: number): Promise<string> => {
return new Promise((resolve, reject) => {
const img = new Image();
img.src = base64;
img.onload = () => {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

// Calculate the new dimensions
let width = img.width;
let height = img.height;

if (width > maxWidth || height > maxHeight) {
const aspectRatio = width / height;
if (width > height) {
width = maxWidth;
height = Math.round(maxWidth / aspectRatio);
} else {
height = maxHeight;
width = Math.round(maxHeight * aspectRatio);
}
}

// Set canvas dimensions and draw the image
canvas.width = width;
canvas.height = height;
ctx?.drawImage(img, 0, 0, width, height);

// Get the resized image as base64
const resizedBase64 = canvas.toDataURL('image/jpeg');
resolve(resizedBase64);
};

img.onerror = (error) => reject(error);
});
};

return (
<div className="container mx-auto mt-6 p-4 border border-gray-300 rounded-xl shadow-lg flex flex-col md:flex-row">
{/* Image Section */}
Expand Down