During my internship, I was assigned an exciting task to develop an image resizer feature for our project. This feature allows users to select images from their devices, resize them, and preview the results before downloading the resized image. The process involved handling various technical challenges, from managing state in React to manipulating images on a canvas element. Here’s a detailed look at how I implemented this feature.
Implementation Details
1. State Management in React
The ‘Home’ component is a class-based component in React that manages the application’s state Two state key variables were used selectImage and resizedImageURL
2 . Handling Image Selection
I used the FileReader API to read the selected image file and convert it into a data URL. This URL is then set as the src attribute of an img element to display the image preview. Additionally, I ensured that the image preview and resize controls are only displayed after an image is selected.
handleImageSelect = (event) => {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
this.setState({ selectedImage: e.target.result }, () => {
// Display image preview and resize controls
});
};
reader.readAsDataURL(file);
}
};
3.Resizing the Image:
Resizing the image involved creating a canvas element and drawing the selected image onto it with the desired dimensions. I used the toBlob method to generate a new image file from the canvas, which could then be downloaded.
handleResizeImage = () => {
const { selectedImage } = this.state;
const resizeWidth = parseInt(document.getElementById('resize-width').value);
const resizeHeight = parseInt(document.getElementById('resize-height').value);
const resizeQuality = parseInt(document.getElementById('resize-quality').value);
const imagePreview = new Image();
imagePreview.src = selectedImage;
imagePreview.onload = () => {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = resizeWidth;
canvas.height = resizeHeight;
ctx.drawImage(imagePreview, 0, 0, resizeWidth, resizeHeight);
canvas.toBlob((blob) => {
const resizedImageURL = URL.createObjectURL(blob);
this.setState({ resizedImageURL });
}, 'image/jpeg', resizeQuality / 100);
};
};
Technologies Used:
React.js: For building the UI and managing state.
JavaScript: For handling image manipulation and event listeners.
HTML/CSS: For structuring and styling the application.
Canvas API: For resizing the image on the client side.
Links :
Deployment _https://fit-snap.vercel.app/