Please note that this code performs client-side image resizing, which means the actual file size remains the same. It resizes the image dimensions but not the file size itself.
<!DOCTYPE html>
<html>
<head>
<title>Image Resizer</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f3f3f3;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
border-radius: 5px;
}
h1 {
color: #333;
text-align: center;
}
.prompt {
margin-bottom: 10px;
}
.prompt label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
.prompt input[type="file"] {
display: none;
}
.prompt .custom-file-upload {
display: inline-block;
padding: 6px 12px;
cursor: pointer;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 3px;
}
.button {
display: block;
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: #fff;
text-align: center;
text-decoration: none;
border-radius: 3px;
cursor: pointer;
}
.button:hover {
background-color: #45a049;
}
.output img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="container">
<h1>Image Resizer</h1>
<div class="prompt">
<label for="upload">Upload an image:</label>
<input type="file" id="upload" accept="image/*">
<label for="upload" class="custom-file-upload">Choose File</label>
</div>
<div class="prompt">
<label for="width">Width:</label>
<input type="number" id="width" placeholder="Enter the desired width" min="1">
</div>
<div class="prompt">
<label for="height">Height:</label>
<input type="number" id="height" placeholder="Enter the desired height" min="1">
</div>
<button class="button" onclick="resizeImage()">Resize Image</button>
<div class="output" id="output"></div>
</div>
<script>
function resizeImage() {
var fileInput = document.getElementById('upload');
var widthInput = document.getElementById('width');
var heightInput = document.getElementById('height');
var outputDiv = document.getElementById('output');
var file = fileInput.files[0];
if (!file) return;
var reader = new FileReader();
reader.onload = function(e) {
var img = new Image();
img.onload = function() {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var width = Number(widthInput.value);
var height = Number(heightInput.value);
// Calculate new dimensions while maintaining aspect ratio
if (width && !height) {
height = (width / img.width) * img.height;
} else if (!width && height) {
width = (height / img.height) * img.width;
} else if (width && height) {
var aspectRatio = img.width / img.height;
if (width / height > aspectRatio) {
height = (width / aspectRatio);
} else {
width = (height * aspectRatio);
}
} else {
return; // No dimensions provided
}
// Set canvas dimensions
canvas.width = width;
canvas.height = height;
// Draw resized image on the canvas
ctx.drawImage(img, 0, 0, width, height);
// Convert the canvas image to a data URL
var resizedImageURL = canvas.toDataURL(file.type);
// Display the resized image
var imgOutput = document.createElement('img');
imgOutput.src = resizedImageURL;
outputDiv.innerHTML = '';
outputDiv.appendChild(imgOutput);
};
img.src = e.target.result;
};
reader.readAsDataURL(file);
}
</script>
</body>
</html>
No comments:
Post a Comment