Compress Your Image
Upload your image, compress it, and download the compressed version.
Drag & Drop your image here or click to select
// Handle file drag & drop uploadArea.addEventListener("click", () => fileInput.click()); uploadArea.addEventListener("dragover", (e) => e.preventDefault()); uploadArea.addEventListener("drop", handleFileDrop);
function handleFileSelect(event) { const file = event.target.files[0]; if (file) { compressButton.style.display = "inline-block"; // Show compress button statusText.textContent = "File selected. Ready to compress!"; handleFileCompression(file); } }
function handleFileDrop(event) { event.preventDefault(); const file = event.dataTransfer.files[0]; fileInput.files = event.dataTransfer.files; handleFileSelect({ target: { files: [file] } }); }
function handleFileCompression(file) { // Check if the file is an image if (!file.type.startsWith("image/")) { statusText.textContent = "Please select a valid image file."; return; }
const reader = new FileReader(); reader.onload = function(event) { const image = new Image(); image.src = event.target.result;
image.onload = function() { // Display original image originalImage.src = image.src;
// Start compression new Compressor(image, { quality: 0.6, success(result) { // Show the compressed image const compressedImageUrl = URL.createObjectURL(result); compressedImage.src = compressedImageUrl;
// Show the images and the download link imagesContainer.style.display = "flex"; downloadContainer.style.display = "block";
// Set up download link downloadLink.href = compressedImageUrl; statusText.textContent = "Compression successful!"; }, error(err) { statusText.textContent = "Error compressing the image."; } }); }; }; reader.readAsDataURL(file); }
