🎨 تحسين الصور الذكي حسّن جودة الصورة عبر زيادة الوضوح والألوان والإضاءة والتباين مباشرة من المتصفح. السطوع التباين تشبع الألوان الحدة ✨ تحسين تلقائي ⬇ تحميل الصورة المحسنة #enhanceCanvas{ width:100%; max-height:500px; border-radius:12px; border:1px solid #ddd; margin-top:15px; } .enhance-controls{ margin-top:20px; display:grid; grid-template-columns:1fr; gap:12px; } .enhance-controls label{ font-size:14px; font-weight:bold; display:flex; flex-direction:column; gap:6px; } .enhance-controls input{ width:100%; } #autoEnhance, #downloadEnhanced{ width:100%; padding:12px; margin-top:12px; border:none; border-radius:10px; cursor:pointer; font-size:15px; } #autoEnhance{ background:#2563eb; color:#fff; } #downloadEnhanced{ background:#16a34a; color:#fff; } const enhanceInput = document.getElementById("enhanceInput"); const enhanceArea = document.getElementById("enhanceArea"); const canvas = document.getElementById("enhanceCanvas"); const ctx = canvas.getContext("2d"); let originalImage = new Image(); enhanceInput.addEventListener("change",function(){ const file=this.files[0]; if(!file) return; const reader= new FileReader(); reader.onload=function(e){ originalImage.onload=function(){ canvas.width= originalImage.width; canvas.height= originalImage.height; drawEnhanced(); enhanceArea.style.display="block"; }; originalImage.src= e.target.result; }; reader.readAsDataURL(file); }); const controls=[ "brightness", "contrast", "saturation", "sharpness" ]; controls.forEach(id=>{ document .getElementById(id) .addEventListener( "input", drawEnhanced ); }); function drawEnhanced(){ if(!originalImage.src) return; ctx.clearRect( 0, 0, canvas.width, canvas.height ); const brightness= document.getElementById("brightness").value; const contrast= document.getElementById("contrast").value; const saturation= document.getElementById("saturation").value; ctx.filter= `brightness(${brightness}%) contrast(${contrast}%) saturate(${saturation}%)`; ctx.drawImage( originalImage, 0, 0 ); applySharpen(); } function applySharpen(){ const amount= parseInt( document.getElementById("sharpness").value ); if(amount===0) return; const imageData= ctx.getImageData( 0, 0, canvas.width, canvas.height ); const pixels= imageData.data; for(let i=0;i<pixels.length;i+=4){ pixels[i]=Math.min( 255, pixels[i]+amount ); pixels[i+1]=Math.min( 255, pixels[i+1]+amount ); pixels[i+2]=Math.min( 255, pixels[i+2]+amount ); } ctx.putImageData( imageData, 0, 0 ); } document .getElementById("autoEnhance") .addEventListener( "click", function(){ document.getElementById( "brightness" ).value=110; document.getElementById( "contrast" ).value=120; document.getElementById( "saturation" ).value=125; document.getElementById( "sharpness" ).value=20; drawEnhanced(); } ); document .getElementById( "downloadEnhanced" ) .addEventListener( "click", function(){ const link= document.createElement("a"); link.download= "enhanced-image.jpg"; link.href= canvas.toDataURL( "image/jpeg", 0.95 ); link.click(); } );
