4

Aspect Ratio Calculator using React

 7 months ago
source link: https://www.geeksforgeeks.org/aspect-ratio-calculator-using-react/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Aspect Ratio Calculator using React

Courses

In this React project, we’ll build an interactive Aspect Ratio Calculator where users can upload images to visualize aspect ratios and adjust width and height values for live previews.

Preview of final output: Let us have a look at how the final output will look like.

Screenshot-2023-11-07-at-20-00-30-React-App.png

Prerequisites:

Approach to create Aspect Ratio Calculator:

  • Created the basic GUI structure using React-Bootstrap styling elements such as labels and buttons.
  • Implemented a drop-down list containing commonly used aspect ratios for users to select and preview.
  • Utilized CSS properties and attributes to style components, including background colors, layout adjustments, and effects.
  • Enabled users to select a ratio from the dropdown and view live previews.
  • Implemented a download button for users to download the updated resolution image.

Steps to Create the React Application:

Step 1: Set up the React project using the below command in VSCode IDE.

npx create-react-app aspect-ratio

Step 2: Navigate to the newly created project folder by executing the below command.

cd aspect-ratio

Step 3: Installing the required modules:

npm install bootstrap react-bootstrap

Project Structure:

PS.png

The updated dependencies in package.json will look like this:

"dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "bootstrap": "^4.5.0",
    "react": "^16.13.1",
    "react-bootstrap": "^1.2.2",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1"
}

Example: Below is the practical implementation of the aspect ratio calculator using ReactJS:

  • Javascript
//App.js
import React,
{ useState } from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import {
Container, Row, Col,
Button, Form, InputGroup
} from 'react-bootstrap';
function App() {
const [file, setFile] = useState(null);
const [selectedRatio, setSelectedRatio] = useState('16:9');
const commonRatios = {
"16:9": [1920, 1080],
"5:4": [1280, 1024],
"4:3": [1024, 768],
"3:2": [1440, 960],
"8K": [7680, 4320],
"5K": [5120, 2880],
"4K": [3840, 2160],
"Retina": [2048, 1536],
"iPhone6plus": [1920, 1080],
"iPhone6": [1334, 750],
"iPhone5": [1136, 640],
"iPad": [1024, 768],
"Twitter": [1024, 512],
"WebBanner": [728, 90],
"VGA": [640, 480],
"HVGA": [320, 480],
};
const [selectedWidth, setSelectedWidth] =
useState(commonRatios[selectedRatio][0]);
const [selectedHeight, setSelectedHeight] =
useState(commonRatios[selectedRatio][1]);
const handleFileChange = (e) => {
const uploadedFile = e.target.files[0];
setFile(URL.createObjectURL(uploadedFile));
};
const downloadImage =
() => {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = selectedWidth;
canvas.height = selectedHeight;
const img = new Image();
img.src = file;
img.onload =
() => {
ctx.drawImage(
img, 0, 0,
selectedWidth,
selectedHeight);
canvas.toBlob(
(blob) => {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'resized_image.png';
a.click();
}, 'image/png');
};
};
return (
<Container className="container">
<h1>
GeeksforGeeks Aspect Ratio
Calculator with Live Preview
</h1>
<Row className="image-input">
<Col>
<Form.Group controlId="customImage">
<Form.Label className="label-text">
Upload an image:
</Form.Label>
<Form.Control
type="file"
onChange={handleFileChange}
/>
</Form.Group>
</Col>
</Row>
<Row className="common-ratio">
<Col>
<Form.Group controlId="commonRatios">
<Form.Label className="label-text">
Select Common Ratio:
</Form.Label>
<Form.Control
as="select"
onChange={
(e) => {
setSelectedRatio(e.target.value);
const [width, height] =
commonRatios[e.target.value];
setSelectedWidth(width);
setSelectedHeight(height);
}}
value={selectedRatio}>
{
Object.keys(commonRatios)
.map(
(ratio) => (
<option key={ratio}
value={ratio}>
{ratio}
({
commonRatios[ratio][0]
}x{commonRatios[ratio][1]})
</option>
))
}
</Form.Control>
</Form.Group>
</Col>
</Row>
<Row className="image-container">
<Col>
<img
id="previewImage"
alt="Preview Image"
width={selectedWidth}
height={selectedHeight}
/>
</Col>
</Row>
<Row>
<Col>
<Button onClick={downloadImage}>
Download Image
</Button>
</Col>
</Row>
</Container>
);
}
export default App;

Steps to run the application:

npm start

Output: Type the following URL in the address bar http://localhost:3000/

Output.gif

Learn to code easily with our course Coding for Everyone. This course is accessible and designed for everyone, even if you're new to coding. Start today and join millions on a journey to improve your skills!

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Looking for a place to share your ideas, learn, and connect? Our Community portal is just the spot! Come join us and see what all the buzz is about!

Three 90 Challenge ending on 31st Jan! Last chance to get 90% refund by completing 90% course in 90 days. Explore offer now.
Last Updated : 30 Jan, 2024
Like Article
Save Article
Share your thoughts in the comments

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK