دليل كامل باللغة العربية يشرح كيفية دمج واستخدام خدمات معالجة الصور، تحويل الفيديو، وترحيل البريد الإلكتروني في موقعك مباشرة وبكل سهولة.
تعمل هذه الخدمة عن طريق إرسال طلب GET بسيط يحتوي على رابط الصورة الأساسية مع المقاسات المطلوبة. ستقوم الخدمة بتحميل الصورة ومعالجتها وضغطها بصيغة WebP الحديثة بدقة 81%، وحفظها في التخزين المؤقت (Cache) لتعرض فوراً في المرات القادمة بدون أي استهلاك لموارد الخادم.
| المعامل | الحالة | الوصف | القيم المقبولة |
|---|---|---|---|
| service | إجباري | يحدد اسم الخدمة المستدعاة | image |
| url | إجباري | رابط الصورة الأصلية المراد معالجتها | رابط ويب مباشر (URL) |
| w | اختياري | العرض المطلوب للصورة بالبكسل | أرقام (مثال: 400) |
| h | اختياري | الارتفاع المطلوب للصورة بالبكسل | أرقام (مثال: 300) |
| fit | اختياري | طريقة مطابقة الصورة للمقاسات الجديدة |
cover (قص من المركز لتعبئة الأبعاد)contain (الملاءمة مع الحفاظ على الأبعاد الافتراضية)fill (شد الصورة لتعبئة الأبعاد تماماً)
|
<!-- تضمين صورة مع تصغير العرض إلى 500 بكسل والمحافظة على التناسب وبصيغة WebP -->
<img src="http://localhost/index.php?service=image&url=https://images.unsplash.com/photo-1506744038136-46273834b3fb&w=500&fit=contain" alt="صورة معالجة بالـ CDN">
<!-- تضمين صورة مقصوصة بقياس 300x300 بكسل مربعة تماماً -->
<img src="http://localhost/index.php?service=image&url=https://images.unsplash.com/photo-1506744038136-46273834b3fb&w=300&h=300&fit=cover" alt="صورة مربعة مقصوصة">
تتيح لك هذه الخدمة تزويدها برابط لأي فيديو (مثل MP4) عبر طلب GET مباشر. سيقوم السيرفر بتحميل الفيديو لمرة واحدة، ثم معالجته وتحويله بترميز حديث إلى صيغة WebM المناسبة لصفحات الويب وبحجم مضغوط جداً، مع تخزين النتيجة مؤقتاً لسرعة استجابة فائقة.
| المعامل | الحالة | الوصف | القيم المقبولة |
|---|---|---|---|
| service | إجباري | يحدد اسم الخدمة المستدعاة | video |
| url | إجباري | رابط ملف الفيديو الأصلي المراد تحويله | رابط ويب مباشر للفيديو |
| w | اختياري | العرض المطلوب للفيديو المخرَج بالبكسل | أرقام (مثال: 640) |
| h | اختياري | الارتفاع المطلوب للفيديو المخرَج بالبكسل | أرقام (مثال: 360) |
| json | اختياري | تغيير شكل الاستجابة من بث مباشر إلى ملف JSON | true |
json=true، فسيعيد السيرفر كائن JSON يحتوي على رابط مسار التخزين المؤقت وحجم الملف المولد.
<!-- تشغيل فيديو MP4 خارجي بعد تحويله تلقائياً لـ WebM مضغوط وتصغير العرض لـ 640 بكسل -->
<video controls width="640" poster="thumbnail.jpg">
<source src="http://localhost/index.php?service=video&url=https://www.w3schools.com/html/mov_bbb.mp4&w=640" type="video/webm">
متصفحك لا يدعم تشغيل فيديو WebM.
</video>
هذا الجزء يستقبل البيانات عبر طلب POST (سواء كنموذج Form URL-Encoded أو كـ JSON). يبحث عن المعاملات البريدية الأساسية (المستلم والموضوع) ويرسل رسالة تحتوي على جدول HTML منسق بكل الحقول الأخرى المرسلة في الطلب أياً كان محتواها وتسميتها.
| المعامل | الحالة | الوصف | أمثلة على الاستخدام |
|---|---|---|---|
| to | إجباري | البريد الإلكتروني للشخص الذي سيتلقى الرسالة | [email protected] |
| title | اختياري | عنوان/موضوع الرسالة البريدية | طلب حجز جديد أو رسالة تواصل |
<form action="http://localhost/index.php?service=mail" method="POST">
<!-- كود الـ API المصرح به للتوثيق والتحقق -->
<input type="hidden" name="api_key" value="cdn_key_secret_123456">
<!-- الحقول البريدية الأساسية -->
<input type="hidden" name="to" value="[email protected]">
<input type="hidden" name="title" value="رسالة جديدة من الموقع">
<!-- الحقول المخصصة (ستظهر تلقائياً داخل جدول الرسالة) -->
<label>الاسم الكريم:</label>
<input type="text" name="اسم_العميل" required>
<label>رقم الجوال:</label>
<input type="tel" name="رقم_الهاتف" required>
<label>الرسالة:</label>
<textarea name="نص_الرسالة" required></textarea>
<button type="submit">إرسال الرسالة الآن</button>
</form>
<script>
async function submitContactForm() {
// تجهيز البيانات بالكامل
const formData = {
// حقول التحكم والتوثيق البريدية
api_key: "cdn_key_secret_123456",
to: "[email protected]",
title: "تسجيل مشترك جديد",
// الحقول الخاصة التي سيجمعها السيرفر داخل جسم البريد
username: "سليم اليماني",
plan_selected: "باقة الأعمال المميزة",
signup_date: new Date().toLocaleDateString('ar-EG'),
browser_used: navigator.userAgent
};
try {
const response = await fetch("http://localhost/index.php?service=mail", {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-API-Key": "cdn_key_secret_123456"
},
body: JSON.stringify(formData)
});
const result = await response.json();
if (result.success) {
alert("تم إرسال رسالتك بنجاح وسيتصل بك فريق الدعم!");
console.log("الاستجابة:", result);
} else {
alert("حدث خطأ أثناء الإرسال: " + result.message);
}
} catch (error) {
console.error("فشل الاتصال بالخادم:", error);
}
}
</script>