<
Image Resizer Tool
body {
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
}
.container {
text-align: center;
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h1 {
color: #333;
margin-bottom: 20px;
}
.uploader, .resizer, .download {
margin-bottom: 15px;
}
input[type="file"] {
padding: 10px;
background: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="number"] {
width: 100px;
padding: 5px;
margin: 0 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
padding: 10px 20px;
background: #28a745;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background: #218838;
}
document.getElementById('imageInput').addEventListener('change', handleImageUpload);
document.getElementById('resizeButton').addEventListener('click', resizeImage);
document.getElementById('downloadButton').addEventListener('click', downloadImage);
let originalImage = null;
function handleImageUpload(event) {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
const img = new Image();
img.onload = function() {
originalImage = img;
document.getElementById('downloadButton').style.display = 'none';
}
img.src = e.target.result;
}
reader.readAsDataURL(file);
}
}
function resizeImage() {
const width = document.getElementById('width').value;
const height = document.getElementById('height').value;
if (originalImage && (width || height)) {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const ratio = originalImage.width / originalImage.height;
if (width && !height) {
canvas.width = width;
canvas.height = width / ratio;
} else if (!width && height) {
canvas.width = height * ratio;
canvas.height = height;
} else {
canvas.width = width;
canvas.height = height;
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(originalImage, 0, 0, canvas.width, canvas.height);
document.getElementById('downloadButton').style.display = 'block';
}
}
function downloadImage() {
const canvas = document.getElementById('canvas');
canvas.toBlob(function(blob) {
saveAs(blob, 'resized_image.png');
});
}
<