مولد صور العناصر النائبة مجانًا

كيف يعمل

يحدث كل شيء في متصفحك باستخدام HTML Canvas API ووسوم SVG مكتوبة يدويًا — لا خادم ولا رفع ولا خدمة خارجية. تضبط الأبعاد والألوان ونص التسمية، فترسم الأداة الصورة مباشرة على عنصر canvas في الوقت الفعلي، ثم تحوّلها إلى PNG أو JPEG أو SVG عند الطلب.

1. 1
   اضبط الأبعاد والألوان

   اكتب عرضًا وارتفاعًا (1–4000 px لكل منهما)، أو اختر أحد أحد عشر إعدادًا مسبقًا يغطي أحجام وسائل التواصل الاجتماعي والتصميم الشائعة. اختر لون الخلفية والنص من السمات المدمجة أو أدخل أي قيمة ست عشرية مباشرة؛ ويبقى منتقي الألوان الأصلي وحقل النص المتحقق منه متزامنين.
2. 2
   Canvas API تعرض المعاينة فورًا

   يستدعي تأثير React الدالة drawPlaceholder() عند كل تغيير. تستخدم هذه الدالة CanvasRenderingContext2D لملء المستطيل بلون الخلفية، ورسم خطوط قطرية متقاطعة باهتة بعتامة 15% اختياريًا، ثم قياس نص التسمية وتوسيطه — مع تصغير الخط تلقائيًا حتى يتسع ضمن 90% من عرض اللوحة.
3. 3
   التصدير كـ PNG أو JPEG أو SVG

   يستدعي تنزيل PNG وJPEG الدالة canvas.toDataURL()، ويحوّل نتيجة base64 إلى Blob في الذاكرة، ويطلق التنزيل — كل ذلك بشكل متزامن داخل إيماءة المستخدم لتلبية قواعد التنزيل في Safari على iOS. ويبني تصدير SVG سلسلة SVG مستقلة بمستطيل مطابق وخطوط قطرية اختيارية وعنصر نص، ثم يحفظها كملف .svg.
4. 4
   التصدير بالجملة واختصارات النسخ

   يستورد زر «تنزيل كل الإعدادات المسبقة» مكتبة JSZip ديناميكيًا، ويعيد عرض كل حجم من الأحجام المسبقة الأحد عشر على لوحة خارج الشاشة باستخدام دالة الرسم نفسها، ويحزم كل ملفات PNG في ملف ZIP واحد. وتُخرج أزرار النسخ رابط بيانات PNG، أو وسم img بـ SVG مضمّن، أو تعريف CSS background-image للصق الفوري في الكود.

أدوات ذات صلة