Posts
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
canvas {
border: 1px solid #ccc;
margin-top: 10px;
}
input[type="range"] {
width: 100px;
margin-right: 10px;
}
button {
margin-top: 10px;
}
// Get the canvas element and its context
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// Load the selected image file and display it on the canvas
const imageLoader = document.getElementById('image-file');
imageLoader.addEventListener('change', loadImage);
function loadImage(event) {
const image = new Image();
image.onload = function() {
// Set the canvas dimensions to match the image size
canvas.width = image.width;
canvas.height = image.height;
// Draw the image on the canvas
ctx.drawImage(image, 0, 0);
// Enable the download button
downloadBtn.disabled = false;
};
image.src = URL.createObjectURL(event.target.files[0]);
}
// Function to change the image resolution
function changeResolution() {
// Get the current canvas image data
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
// Get the new canvas dimensions from the range inputs
const width = document.getElementById('width').value;
const height = document.getElementById('height').value;
// Set the new canvas dimensions and scale the image data accordingly
canvas.width = canvas.width * width;
canvas.height = canvas.height * height;
ctx.scale(width, height);
// Put the scaled image data back on the canvas
ctx.putImageData(imageData, 0, 0);
}
// Add event listeners to the range inputs
const widthInput = document.getElementById('width');
const heightInput = document.getElementById('height');
widthInput.addEventListener('input', changeResolution);
heightInput.addEventListener('input', changeResolution);
// Add event listener to the download button
const downloadBtn = document.getElementById('download-btn');
downloadBtn.addEventListener('click', function() {
// Get the modified image data as a data URL
const dataUrl = canvas.toDataURL('image/png');
// Create a link element and set its href and download attributes
const link = document.createElement('a');
link.href = dataUrl;
link.download = 'modified-image.png';
// Add the link to the document and click it
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});
Getting Info...