reader.onload = function (event) { const img = new Image(); img.src = event.target.result;

img.onload = function () { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d');

// Set canvas dimensions canvas.width = img.width; canvas.height = img.height;

// Draw the image on the canvas ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

// Compress the image canvas.toBlob( (blob) => { const compressedFile = new File([blob], file.name, { type: 'image/jpeg', lastModified: Date.now(), });

// Display results in the table const originalSize = (file.size / 1024).toFixed(2); const compressedSize = (blob.size / 1024).toFixed(2); const compressionRatio = ((1 - blob.size / file.size) * 100).toFixed(2);

const newRow = `

`;

resultsBody.insertAdjacentHTML('afterbegin', newRow); }, 'image/jpeg', compressLevel / 100 ); }; };

reader.readAsDataURL(file); }

// Update compression level value document.getElementById('compressLevel').addEventListener('input', function () { document.getElementById('compressValue').textContent = this.value; });