132 lines
3.8 KiB
PHP
132 lines
3.8 KiB
PHP
<div class="containezx" style="padding: 10px;">
|
|
<h1 style="font-size: 20px;">Image Compression Tool</h1>
|
|
<input type="file" id="imageInput" accept="image/*">
|
|
<br>
|
|
<label for="qualityInput">Compression Quality:</label>
|
|
<div style="display: flex; flex-direction: row;">
|
|
<input type="range" id="qualityInput" min="1" max="100" step="1" value="10" />
|
|
<span id="qualityValue" style="margin-top: -8px; font-size: 20px;">10%</span>
|
|
</div>
|
|
|
|
<br>
|
|
<div class="image-preview">
|
|
<img id="preview" src="" alt="" />
|
|
</div>
|
|
<span id="imageSize" class="image-size"></span>
|
|
<br>
|
|
<div style="display: flex; flex-direction: row;">
|
|
<button class="comp-button" onclick="compressImage()">Compress Image</button>
|
|
<a class="comp-button" id="downloadLink" href="#" download="compressed_image.jpg" style="display: none; margin-left: 20px;">Download Compressed Image</a>
|
|
</div>
|
|
</div>
|
|
|
|
<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 = 'block';
|
|
|
|
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>
|
|
<style>
|
|
.containezx {
|
|
margin-top: 100px;
|
|
max-width: 600px;
|
|
margin: 100px auto;
|
|
background-color: #3d3d3d;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 0 5px #ffffff;
|
|
}
|
|
|
|
h1 {
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
label {
|
|
font-weight: bold;
|
|
}
|
|
|
|
input[type="file"] {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
input[type="range"] {
|
|
width: 100%;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.image-preview {
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
#preview {
|
|
max-width: 100%;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.image-size {
|
|
font-size: 14px;
|
|
color: #999;
|
|
}
|
|
.comp-button{
|
|
background-color: #6d6d6d;
|
|
padding: 10px 20px 10px 20px;
|
|
color: #fff;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
font-size: 12px;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s;
|
|
}
|
|
.comp-button:hover{
|
|
background-color: #8d8d8d;
|
|
}
|
|
</style>
|