Image Enlarger Tool
Sure, here's an example of how you can create a simple Image Enlarger Tool using HTML and JavaScript. This code will allow users to upload an image, select a zoom level, and then view the enlarged image.
HTML code:
php
Copy code
Image Enlarger Tool
JavaScript code:
arduino
Copy code
function enlargeImage() {
const fileInput = document.getElementById('file-input');
const zoomLevel = document.getElementById('zoom-level').value;
const imageContainer = document.getElementById('image-container');
if (fileInput.files.length === 0) {
alert('Please select an image to enlarge.');
return;
}
const file = fileInput.files[0];
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
const image = new Image();
image.src = reader.result;
image.onload = function () {
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.width = image.width * zoomLevel;
canvas.height = image.height * zoomLevel;
context.drawImage(image, 0, 0, canvas.width, canvas.height);
const enlargedImage = document.createElement('img');
enlargedImage.src = canvas.toDataURL();
imageContainer.innerHTML = '';
imageContainer.appendChild(enlargedImage);
};
};
}
This code creates a form with an input field for selecting an image, a range input for selecting the zoom level, and a button for triggering the image enlargement. When the user clicks the button, the enlargeImage() function is called.
This function gets the selected file and zoom level, creates a new image object, and loads the selected image into it. Once the image is loaded, a canvas element is created with the appropriate size for the enlarged image, and the original image is drawn onto the canvas with the specified zoom level. Finally, the enlarged image is created as an img element with the source set to the data URL of the canvas, and is added to the image-container div for display.
Note that this code does not include any error handling or input validation, and may require additional modifications to suit your specific needs
Comments
Post a Comment