<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3HeuMgBq_wCW56UZ8wGb37hTiyrhZs8g6o-U6oYzWmC11nWLWiBEOlJjufkJ9hjcBWTkRhmwU4ABkN6MPfSGzjYFD-nlsCoprZbA8YNFu8y9u1AQEP65jsJG3iW6gG5qoq4Qa3tWyxQgFidWd8A_yPnHROtb5VUIqSLEF4dOucRw8QKSDF9u0zHHxGPDZ/s1408/1000048355.jpg" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" data-original-height="768" data-original-width="1408" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3HeuMgBq_wCW56UZ8wGb37hTiyrhZs8g6o-U6oYzWmC11nWLWiBEOlJjufkJ9hjcBWTkRhmwU4ABkN6MPfSGzjYFD-nlsCoprZbA8YNFu8y9u1AQEP65jsJG3iW6gG5qoq4Qa3tWyxQgFidWd8A_yPnHROtb5VUIqSLEF4dOucRw8QKSDF9u0zHHxGPDZ/s600/1000048355.jpg" width="600"/></a></div> <div style="background:#1e222d; color:#fff; padding:25px; border-radius:12px; font-family:sans-serif; max-width:800px; margin: auto;"> <h2 style="color:#24ee89; text-align:center; margin-bottom:10px;">ClearCut AI - Smart Background Remover</h2> <p style="text-align:center; color:#a0a0a0; font-size:14px; margin-bottom:20px;">قم برفع الصورة، ثم استخدم الفرشاة لتحديد الجزء الذي تريد الاحتفاظ به فوق الشخصية أو العنصر!</p> <!-- منطقة رفع الصورة --> <div id="bgDropzone" onclick="document.getElementById('bgFileInput').click()" style="border: 2px dashed #3a415a; padding: 30px; text-align: center; border-radius: 8px; cursor: pointer; background: #292d3e; margin-bottom: 20px;"> <input accept="image/*" id="bgFileInput" onchange="handleFileSelect(event)" style="display: none;" type="file" /> <p style="margin: 0; color: #24ee89; font-weight: bold;">اضغط هنا لرفع الصورة أو اسحبها إلى هنا</p> </div> <!-- حاوية العمل والكانفاس --> <div id="editorContainer" style="display: none; text-align: center; margin-bottom: 20px;"> <div style="margin-bottom: 10px; display: flex; justify-content: center; gap: 15px; align-items: center;"> <label style="font-size: 14px; color: #a0a0a0;">حجم الفرشاة: <input type="range" id="brushSize" min="5" max="50" value="20" oninput="updateBrushSize(this.value)"></label> <button onclick="clearMask()" style="background: #ef4444; color: #fff; border: none; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 12px;">مسح التحديد</button> </div> <div style="position: relative; display: inline-block; max-width: 100%; overflow: hidden; border: 1px solid #3a415a; border-radius: 8px; background: #111;"> <canvas id="imageCanvas" style="display: block; max-width: 100%; height: auto; cursor: crosshair;"></canvas> </div> </div> <!-- زر التصدير والحفظ --> <div id="actionContainer" style="display: none; text-align: center;"> <button onclick="processAndDownload()" style="background: #24ee89; color: #1e222d; border: none; padding: 12px 25px; font-size: 16px; font-weight: bold; border-radius: 8px; cursor: pointer;">إزالة الخلفية وتحميل النتيجة</button> </div> </div> <script> let canvas, ctx; let img = new Image(); let isDrawing = false; let brushSize = 20; let maskCanvas, maskCtx; function handleFileSelect(event) { const file = event.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = function(e) { img.src = e.target.result; } reader.readAsDataURL(file); } img.onload = function() { document.getElementById('editorContainer').style.display = 'block'; document.getElementById('actionContainer').style.display = 'block'; canvas = document.getElementById('imageCanvas'); ctx = canvas.getContext('2d'); // ضبط الأبعاد لتناسب الصورة بالكامل دون قص canvas.width = img.width; canvas.height = img.height; // إنشاء كانفاس مخفي للرسم (الماسك) maskCanvas = document.createElement('canvas'); maskCanvas.width = img.width; maskCanvas.height = img.height; maskCtx = maskCanvas.getContext('2d'); maskCtx.fillStyle = 'black'; maskCtx.fillRect(0, 0, maskCanvas.width, maskCanvas.height); drawImageOnCanvas(); initDrawingEvents(); } function drawImageOnCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, 0); // عرض تأثير بصري خفيف على الجزء الذي يتم رسمه ctx.save(); ctx.globalAlpha = 0.4; ctx.fillStyle = '#0ea5e9'; // دمج قناع الرسم ctx.drawImage(maskCanvas, 0, 0); ctx.restore(); } function initDrawingEvents() { let drawing = false; function getMousePos(e) { const rect = canvas.getBoundingClientRect(); const scaleX = canvas.width / rect.width; const scaleY = canvas.height / rect.height; const clientX = e.touches ? e.touches[0].clientX : e.clientX; const clientY = e.touches ? e.touches[0].clientY : e.clientY; return { x: (clientX - rect.left) * scaleX, y: (clientY - rect.top) * scaleY }; } function startDrawing(e) { drawing = true; draw(e); } function stopDrawing() { drawing = false; maskCtx.beginPath(); } function draw(e) { if (!drawing) return; e.preventDefault(); const pos = getMousePos(e); maskCtx.lineWidth = brushSize * (canvas.width / canvas.clientWidth); maskCtx.lineCap = 'round'; maskCtx.lineJoin = 'round'; maskCtx.strokeStyle = 'white'; // الأبيض يعني الاحتفاظ بالجزء المرسوم maskCtx.lineTo(pos.x, pos.y); maskCtx.stroke(); maskCtx.beginPath(); maskCtx.moveTo(pos.x, pos.y); drawImageOnCanvas(); } canvas.onmousedown = startDrawing; canvas.onmousemove = draw; window.onmouseup = stopDrawing; canvas.ontouchstart = startDrawing; canvas.ontouchmove = draw; window.ontouchend = stopDrawing; } function updateBrushSize(val) { brushSize = parseInt(val); } function clearMask() { maskCtx.fillStyle = 'black'; maskCtx.fillRect(0, 0, maskCanvas.width, maskCanvas.height); drawImageOnCanvas(); } function processAndDownload() { // إنشاء صورة نهائية بخلفية شفافة بناءً على ما حدده المستخدم const outputCanvas = document.createElement('canvas'); outputCanvas.width = img.width; outputCanvas.height = img.height; const outCtx = outputCanvas.getContext('2d'); outCtx.drawImage(img, 0, 0); // تطبيق القناع لجعل الباقي شفافاً const imgData = outCtx.getImageData(0, 0, outputCanvas.width, outputCanvas.height); const maskData = maskCtx.getImageData(0, 0, maskCanvas.width, maskCanvas.height); for (let i = 0; i < maskData.data.length; i += 4) { // إذا كان اللون أسود في الماسك (يعني لم يتم رسمه)، يتم جعله شفافاً if (maskData.data[i] < 128) { imgData.data[i + 3] = 0; // Alpha = 0 (Transparent) } } outCtx.putImageData(imgData, 0, 0); // تحميل الصورة الشفافة الناتجة const link = document.createElement('a'); link.download = 'clearcut-transparent.png'; link.href = outputCanvas.toDataURL('image/png'); link.click(); } </script>