document.addEventListener("DOMContentLoaded", () => {
const uploadInput = document.getElementById("upload-image");
const resizeButton = document.getElementById("resize-button");
const heightInput = document.getElementById("height");
const widthInput = document.getElementById("width");
const uploadError = document.getElementById("upload-error");
const preview = document.getElementById("preview");
const originalImage = document.getElementById("original-image");
const resizedImage = document.getElementById("resized-image");
const originalDimensions = document.getElementById("original-dimensions");
const resizedDimensions = document.getElementById("resized-dimensions");
const downloadButton = document.getElementById("download-button");
const widthContainer = document.querySelector(".width-input");
document.querySelectorAll("input[name='resize-mode']").forEach((radio) => {
radio.addEventListener("change", (event) => {
if (event.target.value === "manual") {
widthContainer.style.display = "block";
} else {
widthContainer.style.display = "none";
}
});
});
uploadInput.addEventListener("change", (event) => {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
originalImage.src = e.target.result;
preview.style.display = "block";
const img = new Image();
img.src = e.target.result;
img.onload = () => {
originalDimensions.textContent = `Original Dimensions: ${img.width} x ${img.height}`;
};
};
reader.readAsDataURL(file);
}
});
resizeButton.addEventListener("click", () => {
const file = uploadInput.files[0];
if (!file) {
uploadError.style.display = "block";
return;
}
uploadError.style.display = "none";
const resizeMode = document.querySelector("input[name='resize-mode']:checked").value;
const heightValue = parseInt(heightInput.value, 10);
const widthValue = parseInt(widthInput.value, 10);
if (resizeMode === "manual" && (!widthValue || !heightValue)) {
alert("Please provide both width and height for manual resizing.");
return;
}
const reader = new FileReader();
reader.onload = (e) => {
const img = new Image();
img.src = e.target.result;
img.onload = () => {
let newWidth = img.width;
let newHeight = heightValue;
if (resizeMode === "manual") {
newWidth = widthValue;
} else {
newWidth = (img.width / img.height) * newHeight;
}
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
canvas.width = newWidth;
canvas.height = newHeight;
ctx.drawImage(img, 0, 0, newWidth, newHeight);
const resizedDataUrl = canvas.toDataURL("image/png");
resizedImage.src = resizedDataUrl;
resizedDimensions.textContent = `Resized Dimensions: ${newWidth} x ${newHeight}`;
downloadButton.href = resizedDataUrl;
downloadButton.style.display = "block";
};
};
reader.readAsDataURL(file);
});
});
test
Copyright © Highcasinorol 2025. All Rights Reserved | Privacy Policy | Terms And Conditions