75 lines
2.9 KiB
PHP
75 lines
2.9 KiB
PHP
<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" />
|
|
<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> |