<div class="compressor-container"> <h2>ضغط الصور أونلاين مجاناً</h2> <input type="file" id="imageInput" accept="image/*"> <div class="quality-box"> <label>جودة الصورة:</label> <input type="range" id="quality" min="10" max="100" value="70"> <span id="qualityValue">70%</span> </div> <button onclick="compressImage()">ضغط الصورة</button> <div id="previewSection" style="display:none;"> <h3>معاينة الصورة</h3> <img id="previewImage"> <p id="originalSize"></p> <p id="compressedSize"></p> <a download="compressed-image.jpg" id="downloadBtn"> تحميل الصورة المضغوطة </a> </div> </div> <style> .compressor-container{ max-width:700px; margin:auto; padding:20px; background:#fff; border-radius:12px; box-shadow:0 2px 10px rgba(0,0,0,.1); text-align:center; font-family:Tahoma; } input[type=file]{ margin:15px 0; } button{ background:#007bff; color:#fff; border:none; padding:12px 25px; border-radius:8px; cursor:pointer; font-size:16px; } button:hover{ background:#0056b3; } #previewImage{ max-width:100%; margin:20px 0; border-radius:10px; } #downloadBtn{ display:inline-block; margin-top:15px; background:#28a745; color:#fff; padding:10px 20px; border-radius:8px; text-decoration:none; } .quality-box{ margin:15px 0; } </style> <script> const qualitySlider = document.getElementById('quality'); const qualityValue = document.getElementById('qualityValue'); qualitySlider.addEventListener('input', () => { qualityValue.textContent = qualitySlider.value + '%'; }); function compressImage(){ const file = document.getElementById('imageInput').files[0]; if(!file){ alert('اختر صورة أولاً'); return; } const reader = new FileReader(); reader.onload = function(e){ const img = new Image(); img.onload = function(){ const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img,0,0); const quality = qualitySlider.value / 100; canvas.toBlob(function(blob){ const compressedUrl = URL.createObjectURL(blob); document.getElementById('previewImage').src = compressedUrl; document.getElementById('originalSize').innerHTML = 'الحجم الأصلي: ' + (file.size/1024).toFixed(2) + ' KB'; document.getElementById('compressedSize').innerHTML = 'الحجم بعد الضغط: ' + (blob.size/1024).toFixed(2) + ' KB'; document.getElementById('downloadBtn').href = compressedUrl; document.getElementById('previewSection').style.display='block'; },'image/jpeg',quality); } img.src = e.target.result; } reader.readAsDataURL(file); } </script>
