<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Resizer</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f5f5f5;
}
#container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 5px;
}
h1 {
color: #333;
}
#preview-container {
display: none;
margin-top: 20px;
}
#preview {
max-width: 100%;
height: auto;
}
label {
font-weight: bold;
color: #333;
}
input[type="number"] {
width: 60px;
}
#download-btn {
display: none;
margin-top: 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
padding: 10px 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="container">
<h1>Image Resizer</h1>
<label for="image-upload">Choose an image:</label>
<input type="file" id="image-upload" accept="image/*">
<div id="preview-container">
<h2>Preview</h2>
<canvas id="preview"></canvas>
</div>
<label for="width">Width:</label>
<input type="number" id="width" value="300">
<label for="height">Height:</label>
<input type="number" id="height" value="200">
<button id="resize-btn">Resize</button>
<a id="download-btn" download="resized_image.jpg">Download Resized Image</a>
</div>
<script>
const imageUpload = document.getElementById('image-upload');
const previewContainer = document.getElementById('preview-container');
const previewCanvas = document.getElementById('preview');
const widthInput = document.getElementById('width');
const heightInput = document.getElementById('height');
const resizeBtn = document.getElementById('resize-btn');
const downloadBtn = document.getElementById('download-btn');
imageUpload.addEventListener('change', () => {
const file = imageUpload.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
const img = new Image();
img.src = e.target.result;
img.onload = () => {
previewCanvas.width = widthInput.value;
previewCanvas.height = heightInput.value;
const ctx = previewCanvas.getContext('2d');
ctx.drawImage(img, 0, 0, widthInput.value, heightInput.value);
previewContainer.style.display = 'block';
downloadBtn.style.display = 'block';
};
};
reader.readAsDataURL(file);
}
});
resizeBtn.addEventListener('click', () => {
const img = new Image();
img.src = previewCanvas.toDataURL('image/jpeg');
img.onload = () => {
previewCanvas.width = widthInput.value;
previewCanvas.height = heightInput.value;
const ctx = previewCanvas.getContext('2d');
ctx.drawImage(img, 0, 0, widthInput.value, heightInput.value);
};
});
downloadBtn.addEventListener('click', () => {
const resizedImage = previewCanvas.toDataURL('image/jpeg');
downloadBtn.href = resizedImage;
});
</script>
</body>
</html>
