Sujay's Free Tools(Image resizer)
Certainly! Below is a basic example of an Image Resizer tool using HTML, CSS, and JavaScript. It includes a file input for image selection, input fields for setting height and width, a download button, and colorful styling. I'm using the "html2canvas" library for simplicity in creating a downloadable image.
```html
<!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;
background-color: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
#image-container {
text-align: center;
margin-bottom: 20px;
}
#resizer-form {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
label {
display: block;
margin: 10px 0;
}
input {
width: 100%;
padding: 10px;
margin-top: 5px;
box-sizing: border-box;
}
#download-btn {
background-color: #4caf50;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
#download-btn:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div id="resizer-form">
<div id="image-container">
<label for="image-input">Choose an image:</label>
<input type="file" id="image-input" accept="image/*">
<img id="selected-image" style="max-width: 100%;" alt="Selected Image">
</div>
<label for="width-input">Width:</label>
<input type="number" id="width-input" placeholder="Enter width" min="1">
<label for="height-input">Height:</label>
<input type="number" id="height-input" placeholder="Enter height" min="1">
<button id="download-btn" onclick="downloadImage()">Download Resized Image</button>
</div>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<script>
document.getElementById('image-input').addEventListener('change', function (e) {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = function (readerEvent) {
document.getElementById('selected-image').src = readerEvent.target.result;
};
reader.readAsDataURL(file);
});
function downloadImage() {
const width = document.getElementById('width-input').value;
const height = document.getElementById('height-input').value;
html2canvas(document.getElementById('image-container')).then(canvas => {
const resizedCanvas = document.createElement('canvas');
resizedCanvas.width = width;
resizedCanvas.height = height;
const resizedContext = resizedCanvas.getContext('2d');
resizedContext.drawImage(canvas, 0, 0, width, height);
const downloadLink = document.createElement('a');
downloadLink.href = resizedCanvas.toDataURL('image/png');
downloadLink.download = 'resized_image.png';
downloadLink.click();
});
}
</script>
</body>
</html>
```
This example uses the html2canvas library to create a canvas representation of the image and then resizes it based on user input. The resulting image can be downloaded with the specified dimensions. Please note that using external libraries might have licensing considerations, so make sure to check and comply with the library's license if you plan to use this code in a production environment.
Comments
Post a Comment