# Resizo Embed — نظرة عامة

Resizo Embed منظومةٌ من ستّ أدوات ودجت مجّانية لمعالجة الصور تعتمد على iframe، ويُمكن لأيّ موقع وِب إدراجها بمقتطف HTML واحد فقط. تُقدَّم الودجات من [resizo.in](https://www.resizo.in/ar/embed/)، وتعمل بالكامل داخل متصفّح الزائر، ولا تحتاج إلى مفتاح API ولا حساب ولا تكامل خلفيّ. الإدراجات مجّانية للاستخدام الشخصي والتجاري والمؤسّسي؛ والشرط الوحيد هو أن يظلّ رابط "Powered by Resizo" الصغير في تذييل الودجت ظاهرًا.

## الودجات المتاحة

| الودجت | مسار الإدراج | الغرض |
| --- | --- | --- |
| Image Resizer | `/embed/image-resizer/` | تغيير الحجم بأبعاد بكسل دقيقة مع قفل نسبة الأبعاد. |
| JPG Compressor | `/embed/compress-image/` | تقليص أحجام ملفّات JPG وPNG وWebP عبر شريط جودة. |
| WebP Converter | `/embed/webp-converter/` | تحويل PNG وJPG إلى WebP. |
| Passport Photo | `/embed/passport-photo/` | إنشاء صور جواز السفر / التأشيرة وفق المواصفات الرسمية للولايات المتّحدة والمملكة المتّحدة والاتّحاد الأوروبي والهند وكندا. |
| Batch Resize | `/embed/batch-resize/` | إعادة تحجيم كميّة كبيرة من الصور دفعةً واحدة؛ تُنزَّل النتائج في ملف ZIP. |
| Watermark Tool | `/embed/watermark/` | إضافة علامات مائية نصّية مع تحديد الموضع واللون والشفافية والدوران. |

## أقلّ مقتطف إدراج

```html
<iframe
  src="https://www.resizo.in/embed/image-resizer/"
  width="100%"
  height="640"
  loading="lazy"
  title="Resizo — Image Resizer"
  style="border:none;border-radius:12px;overflow:hidden;display:block;max-width:100%;"
></iframe>
```

حجم كلّ ودجت نحو 5–10 KB إجمالًا (HTML + CSS + JavaScript خالص)، ويُحمَّل افتراضيًا بنمط lazy. لا يوجد أيّ framework، ولا أيّ SDK للتتبّع، ولا أيّ نقاط جمع تحليلات داخل الـ iframe.

## معاملات URL

| المعامل | القيم | القيمة الافتراضية | الوصف |
| --- | --- | --- | --- |
| `theme` | `light`، `dark` | (يتبع `prefers-color-scheme`) | يفرض ثيمًا بصريًا ثابتًا. احذِف المعامل ليتوافق تلقائيًا مع تفضيلات نظام تشغيل الزائر. |

نمط URL الأساسي هو `https://www.resizo.in/embed/{tool-id}/[?theme=light|dark]`.

## نموذج الخصوصية والأمن

يرث الإدراج بنية Resizo "بدون رفع، بدون استمرار في التخزين":

- **بدون رفع.** يستخدم الودجت `FileReader` لقراءة ملف المستخدم، وHTML5 Canvas API لمعالجته. لا توجد نقطة نهاية شبكية تتلقّى بيانات الصور.
- **بدون ملفّات تعريف ارتباط.** لا تُضبط أيّ cookies داخل الـ iframe. ولا يُكتب شيءٌ افتراضيًا إلى `localStorage` أو `sessionStorage`.
- **بدون تتبّع لمحتوى الملف.** لا تُرسَل أسماء الملفّات ولا الأبعاد ولا البيانات الوصفية.
- **متوافق مع GDPR وCCPA معماريًّا**، وليس مجرّد سياسة. تحقّق من ذلك عبر DevTools ← تبويب Network: لا تنطلق أيّ طلبات أثناء المعالجة.
- **سمة `sandbox` غير مدعومة.** يجب حذفها، لأنّ `sandbox` تمنع تنزيلات الملفّات التي يعتمد عليها الودجت. وإذا كانت سياسة Content-Security-Policy صارمة سارية، فأضِف `frame-src https://www.resizo.in;`.

## بروتوكول التحجيم التلقائي (postMessage)

يُرسل كلّ ودجت ارتفاع محتواه إلى نافذة الصفحة الأم في كلّ مرّة يتغيّر فيها التخطيط:

```json
{ "source": "resizo-embed", "type": "size", "height": 742 }
```

يمكن للصفحة الأم الاستماع إلى الرسالة وتحديث `style.height` للـ iframe لإزالة أشرطة التمرير الداخلية. طابِق `event.source` مع `contentWindow` لكلّ iframe لتوجيه تحديثات الارتفاع بشكل صحيح في الصفحات التي تحوي عدّة إدراجات. لا يلزم وجود أيّ مكتبة طرف ثالث من نوع `iframe-resizer`.

## التوافق مع المنصّات

يعمل المقتطف نفسه على كلّ منصّة تقبل HTML مخصّصًا:

- **WordPress** — كتلة Custom HTML (Block Editor) أو تبويب "Text" (Classic Editor). قد تحتاج إضافات الأمن إلى إدراج `resizo.in` في القائمة المسموح بها.
- **Ghost** — بطاقة HTML.
- **Webflow** — عنصر Embed.
- **Wix** — Add ← Embed Code ← Embed HTML.
- **Squarespace** — كتلة Code Block.
- **Notion** — أمر سلَش `/embed` مع رابط الودجت.
- **Shopify** — Pages ← انقر `</>` (Show HTML) ← الصق.
- **HTML ثابت** — ألصق مباشرةً داخل الملف؛ بدون خطوة بناء.

تتوفّر أيضًا مكوّنات جاهزة للإسقاط لكلٍّ من **React** (مع تحجيم تلقائي عبر `useEffect`)، و**Vue** (`onMounted` / `onBeforeUnmount`)، و**Angular** (`ngOnInit` / `ngOnDestroy`).

## دعم المتصفّحات

| المتصفّح | الإصدار الأدنى |
| --- | --- |
| Chrome / Edge (Chromium) | 80+ |
| Firefox | 78+ |
| Safari (بما في ذلك iOS Safari) | 14+ |
| Chrome Android | 80+ |

تصدير WebP مدعوم بالكامل في Chrome وSafari وEdge. وتحظى الـ Canvas API المستخدمة داخليًا بدعم عالمي يفوق 98.5 % وفقًا لـ [caniuse.com/canvas](https://caniuse.com/canvas).

## إدارة الإصدارات

يُجلب الإدراج من `resizo.in` وقت الرندر، لذا تُنشَر التحسينات تلقائيًا. ويظلّ *كود* الإدراج الذي تلصقه في موقعك كما هو دون تغيير. وتُتجنَّب التغييرات الكاسرة في رابط URL أو في صيغة الرسائل؛ وإن أصبحت ضروريّةً، فسيستمرّ الرابط القديم في تقديم السلوك السابق ضمن مسار مُحدَّد الإصدار.

## وثائق ذات صلة

- [Embed Generator](https://www.resizo.in/ar/embed/) — مُولّد تفاعليّ يُصدر مقتطف الـ iframe.
- [توثيق الإدراج (HTML)](https://www.resizo.in/ar/embed/docs/) — دليل تكامل كامل مع شروحات لكلّ منصّة، ومكوّنات الـ framework، وحلّ المشكلات.
- [نظرة عامة على Resizo](https://www.resizo.in/docs/overview.ar.md) — ما هو Resizo والأسباب المعمارية وراءه.
- [كيف يعمل Resizo](https://www.resizo.in/docs/how-it-works.ar.md) — منظومة المعالجة داخل المتصفّح ونموذج الخصوصية.
- [الميزات](https://www.resizo.in/docs/features.ar.md) — قائمة الميزات الكاملة وأبعاد إعدادات وسائل التواصل المسبقة.