Image Resizer Tool
Creating an Image Resizer tool using HTML, CSS, and JavaScript is a great project! Below, I’ll provide a complete implementation that allows users to upload an image, set the desired height or width, and download the resized image.
HTML Structure
```html
Image Resizer Tool
![Resized Image]()
```
CSS Styling (styles.css)
```css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
margin: 0;
padding: 0;
}
.container {
text-align: center;
margin: 50px auto;
padding: 20px;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
width: 400px;
}
h1 {
color: #4A90E2;
}
input[type="file"], input[type="number"] {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ddd;
border-radius: 5px;
}
.resize-controls {
display: flex;
justify-content: space-between;
align-items: center;
}
label {
margin-right: 10px;
}
button {
padding: 10px 15px;
background-color: #FF5722; /* Vibrant orange */
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #E64A19; /* Darker orange */
}
#output-image {
margin-top: 20px;
max-width: 100%;
border: 1px solid #ddd;
border-radius: 5px;
}
a {
display: inline-block;
margin-top: 10px;
padding: 10px 15px;
background-color: #4CAF50; /* Green color */
color: white;
border-radius: 5px;
text-decoration: none;
transition: background-color 0.3s;
}
a:hover {
background-color: #388E3C; /* Darker green */
}
```
### JavaScript Functionality (script.js)
```javascript
document.getElementById('resize-button').addEventListener('click', function() {
const fileInput = document.getElementById('image-input');
const widthInput = document.getElementById('width').value;
const heightInput = document.getElementById('height').value;
const canvas = document.getElementById('canvas');
const outputImage = document.getElementById('output-image');
const downloadButton = document.getElementById('download-button');
if (fileInput.files.length === 0) {
alert('Please select an image to resize.');
return;
}
const img = new Image();
img.src = URL.createObjectURL(fileInput.files[0]);
img.onload = () => {
const ctx = canvas.getContext('2d');
const newWidth = widthInput ? parseInt(widthInput) : img.width;
const newHeight = heightInput ? parseInt(heightInput) : img.height;
canvas.width = newWidth;
canvas.height = newHeight;
ctx.drawImage(img, 0, 0, newWidth, newHeight);
// Set output image source
outputImage.src = canvas.toDataURL('image/png');
outputImage.style.display = 'block';
// Set download link
downloadButton.href = canvas.toDataURL('image/png');
downloadButton.download = 'resized_image.png';
downloadButton.style.display = 'inline-block';
};
});
```
Instructions
1. **File Structure**: Create three files named `index.html`, `styles.css`, and `script.js`. Copy the respective code snippets into these files.
2. **Run the Tool**: Open `index.html` in a web browser. You should see an interface to upload an image, set the desired dimensions, and a button to resize the image.
Features
- **Image Upload**: Users can upload an image file from their device.
- **Custom Dimensions**: Users can set the width and/or height for the resized image.
- **Canvas for Resizing**: Uses an HTML canvas to draw the resized image.
- **Download Link**: Once resized, users can download the image in PNG format.
- **Responsive Design**: The layout is responsive and adjusts to different screen sizes.
This implementation provides a solid foundation for an image resizing tool, and you can expand upon it by adding error handling, additional formats, or more advanced features like maintaining aspect ratio. Enjoy building!
Comments
Post a Comment