إنشاء صفحة ويب لإزالة خلفية الصور باستخدام API
مقدمة
إزالة الخلفيات من الصور قد تكون مهمة صعبة، ولكن باستخدام API من remove.bg، تصبح العملية سهلة. في هذا الدليل، سنوضح كيفية إنشاء صفحة ويب بسيطة باستخدام HTML وCSS وJavaScript تتيح للمستخدمين تحميل صورة وإزالة خلفيتها.
المتطلبات الأساسية
قبل البدء، تحتاج إلى التسجيل للحصول على مفتاح API من remove.bg. هذا المفتاح ضروري للتفاعل مع API الخاص بهم لإزالة خلفية الصور.
دليل خطوة بخطوة
1. إنشاء الهيكل الأساسي HTML
أولاً، سنقوم بإنشاء هيكل HTML أساسي لصفحتنا. سيشمل هذا إدخال لتحميل الصور، وزر لتفعيل إزالة الخلفية، ومنطقة لعرض الصورة الناتجة.
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>إزالة خلفية الصورة</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.container {
text-align: center;
}
#resultImage {
max-width: 100%;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>إزالة خلفية الصورة</h1>
<input type="file" id="upload" />
<button id="removeBg">إزالة الخلفية</button>
<div id="result">
<img id="resultImage" src="" alt="الصورة الناتجة" />
</div>
</div>
<script>
document.getElementById('removeBg').addEventListener('click', async () => {
const fileInput = document.getElementById('upload');
const file = fileInput.files[0];
if (!file) {
alert('يرجى تحميل صورة أولاً.');
return;
}
const formData = new FormData();
formData.append('image_file', file);
formData.append('size', 'auto');
try {
const response = await fetch('https://api.remove.bg/v1.0/removebg', {
method: 'POST',
headers: {
'X-Api-Key': 'YOUR_API_KEY_HERE'
},
body: formData
});
if (!response.ok) {
throw new Error('فشل في إزالة الخلفية');
}
const resultBlob = await response.blob();
const resultUrl = URL.createObjectURL(resultBlob);
document.getElementById('resultImage').src = resultUrl;
} catch (error) {
console.error('خطأ:', error);
alert('حدث خطأ أثناء إزالة الخلفية.');
}
});
</script>
</body>
</html>
2. تنسيق باستخدام CSS
CSS المدمجة ستقوم بتركيز المحتوى وتنسيق الصورة الناتجة لضمان ظهورها بشكل جيد على الصفحة.
3. إضافة JavaScript للوظائف
كود JavaScript يتعامل مع تحميل الصور، إرسالها إلى API، وعرض الصورة المعدلة. تم تضمين هذا الكود في `script` أسفل الصفحة.
الخلاصة
باتباع هذه الخطوات، يمكنك إنشاء صفحة ويب بسيطة لإزالة خلفية الصور باستخدام API من remove.bg.
للحصول على مزيد من المعلومات التفصيلية حول API، قم بزيارة وثائق API من remove.bg.
مثال BG Remover
Remove Image Background
Script Background Remover Tool
© 2024 Limrani Imad. جميع الحقوق محفوظة.