clean

.hta_slug/image-compressor.php

@@ -0,0 +1,75 @@
+<section class="diZContainer diZmxAuto ">
+    <h1 class="diZBorderBottom">Image Compression Tool</h1>
+    <div class="toolsSection diZMaxW600 diZmxAuto diZmy20">
+        <div>
+            <input type="file" id="imageInput" accept="image/*">
+        </div>
+        <div>
+            <label for="qualityInput">Compression Quality:</label>
+            <div class="diZFlexRow">
+                <input class="diZw100" type="range" id="qualityInput" min="1" max="100" step="1" value="10" />&nbsp;
+                <span id="qualityValue">10%</span>
+            </div>
+        </div>
+        <div class="image-preview">
+            <img id="preview" src="" alt="" style="width: 100%;" />
+            <span id="imageSize" class="image-size"></span>
+        </div>
+        <div class="diZFlexBetween">
+            <button class="comp-button" onclick="compressImage()"><span>Compress Image</span></button>
+            <a class="diZDisplayNone diZButtonDefault" id="downloadLink" href="#" download="compressed_image.jpg"><span>Download Compressed Image</span></a>
+        </div>
+    </div>
+</section>
+
+<script>
+function compressImage() {
+    const fileInput = document.getElementById('imageInput');
+    const file = fileInput.files[0];
+
+    if (!file) {
+        alert('Please select an image file.');
+        return;
+    }
+
+    const reader = new FileReader();
+
+    reader.onload = function(event) {
+        const image = new Image();
+        image.src = event.target.result;
+
+        image.onload = function() {
+            const canvas = document.createElement('canvas');
+            const ctx = canvas.getContext('2d');
+
+            canvas.width = image.width;
+            canvas.height = image.height;
+            console.log(image.width)
+            ctx.drawImage(image, 0, 0);
+
+            const qualityInput = document.getElementById('qualityInput');
+            const qualityValue = parseFloat(qualityInput.value) / 100; // Normalize quality value to range 0-1
+
+            canvas.toBlob(function(blob) {
+                const url = URL.createObjectURL(blob);
+                const preview = document.getElementById('preview');
+                const downloadLink = document.getElementById('downloadLink');
+
+                preview.src = url;
+                downloadLink.href = url;
+                downloadLink.style.display = 'flex';
+
+                const imageSizeSpan = document.getElementById('imageSize');
+                const compressedSize = (blob.size / 1024).toFixed(2); // Convert bytes to kilobytes and round to 2 decimal places
+                imageSizeSpan.textContent = `Compressed Image Size: ${compressedSize} KB`;
+            }, 'image/jpeg', qualityValue); // Pass normalized quality value to toBlob
+        };
+    };
+
+    reader.readAsDataURL(file);
+}
+
+document.getElementById('qualityInput').addEventListener('input', function() {
+    document.getElementById('qualityValue').textContent = this.value + "%";
+});
+</script>