Aspect Ratio Calculator using React (original) (raw)

Last Updated : 02 Aug, 2024

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.

**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:

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:

CSS `

/* App.css */ body { font-family: 'Arial', sans-serif; background: linear-gradient(to bottom, #ed624a, #9fffe7); color: #333; text-align: center; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; }

.container { width: 80%; background-color: #fff; padding: 20px; border-radius: 15px; box-shadow: 0 2px 14px 0px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; align-items: center; }

h1 { font-size: 40px; margin-bottom: 30px; color: green !important; font-weight: bold; }

.image-input { width: 100%; display: flex; flex-direction: column; align-items: center;

}

.input-section { width: 100%; display: flex; flex-direction: row;

}

.input-field { width: 50%; border: 2px solid #007bff; border-radius: 5px; font-size: 30px; text-align: center; }

.common-ratio { width: 100%; margin-bottom: 10px; }

.result { font-weight: bold; font-size: 24px; margin-top: 30px; text-align: center; color: #007bff; width: 100%; }

.image-container { background-color: #f5f5f5; border: 2px solid #007bff; border-radius: 15px; display: flex; justify-content: center; align-items: center; height: 500px; width: 60%; }

img { max-width: 100%; max-height: 500px; border-radius: 10px; box-shadow: 0 2px 24px 0px rgba(0, 0, 0, 0.2); }

.label-text { font-size: 20px; margin-top: 30px; color: #ff0000; font-weight: bold; }

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 (

GeeksforGeeks Aspect Ratio Calculator with Live Preview

<Form.Group controlId="customImage"> <Form.Label className="label-text"> Upload an image: </Form.Label> <Form.Control type="file" onChange={handleFileChange} /> </Form.Group> <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) => ( )) } </Form.Control> </Form.Group> <img id="previewImage" src={file || 'https://via.placeholder.com/300'} alt="Preview Image" width={selectedWidth} height={selectedHeight} /> Download Image ); } export default App;

**Steps to run the application:

npm start

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