Aspect Ratio Calculator using React
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:
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> w3wiki 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" src={file || 'https://via.placeholder.com/300' } alt= "Preview Image" width={selectedWidth} height={selectedHeight} /> </Col> </Row> <Row> <Col> <Button onClick={downloadImage}> Download Image </Button> </Col> </Row> </Container> ); } export default App; |
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 : 100 vh; } .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 ; } h 1 { 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 ; } |
Steps to run the application:
npm start
Output: Type the following URL in the address bar http://localhost:3000/