الكتابة على الصور عبر Cloudflare Images: دليل عملي

أقصر مسار عملي للكتابة على الصور

ابدأ بتخطيط واحد يمكن تكراره. ينشئ هذا المثال بطاقة منتج بمقاس 1200 في 630، ويأخذ العنوان من ?text=، ويستخدم خطاً ثابتاً للعلامة التجارية، ثم يعيد الصورة بصيغة WebP. استبدل رابطَي الأصول على example.com بروابط تتحكم فيها.

أضف ربط Images وفعّل Workers Cache في إعدادات Wrangler:

{
  "images": {
    "binding": "IMAGES"
  },
  "cache": {
    "enabled": true
  }
}

بعد ذلك استخدم الربط داخل Worker:

const CARD_IMAGE = "https://assets.example.com/product-card.jpg";
const BRAND_FONT = "https://assets.example.com/fonts/Brand-Bold.woff2";

export default {
  async fetch(request, env) {
    const url = new URL(request.url);
    const headline = (url.searchParams.get("text") || "AUTUMN DROP").trim();

    // This is a layout limit for this card, not Cloudflare's 1,000-character ceiling.
    if (!headline || [...headline].length > 120) {
      return new Response("Text must contain 1 to 120 characters", { status: 400 });
    }

    const source = await fetch(CARD_IMAGE);
    if (!source.ok || !source.body) {
      return new Response("Source image unavailable", { status: 502 });
    }

    const textLayer = env.IMAGES.text(headline, {
      font: { url: BRAND_FONT },
      size: 72,
      color: "#FFFFFF"
    });

    const result = await env.IMAGES
      .input(source.body)
      .transform({ width: 1200, height: 630, fit: "cover" })
      .draw(textLayer, { left: 72, bottom: 72 })
      .output({ format: "image/webp" });

    return result.response({
      headers: {
        "Cache-Control": "public, max-age=86400, stale-while-revalidate=604800"
      }
    });
  }
};

اطلب /card?text=Autumn%20Drop، وستحصل على صورة WebP بمقاس 1200 في 630 تحمل العبارة المرسلة على بُعد 72 بكسل من الحافتين اليسرى والسفلية. وبما أن رابط الصورة يتضمن النص المتغير، يمنح هذا المثال كل عبارة توضيحية رابطاً خاصاً بها بصورة طبيعية. أما في بيئة الإنتاج، فاستخدم معرّفات ثابتة للحملات أو المنتجات متى أمكن. السماح بنص حر داخل سلسلة استعلام عامة قد يولّد عدداً غير محدود من النسخ، ما يفتح مشكلة في التكلفة وإساءة الاستخدام معاً.

ثبّت نطاقات مصادر الصور والخطوط أو احصرها في قائمة سماح. المثال لا يتيح للزائر اختيار وجهة جلب عشوائية، وهذا الحد ضروري كلما استطاع Worker عام جلب أصول بعيدة.

ماذا تفعل Cloudflare فعلياً؟

تحويل النص إلى صورة نقطية يعني تحويل الحروف إلى بكسلات. يمكن تصور .text() كآلة تنضيد صغيرة تطبع ملصقاً شفافاً؛ تضع .draw() ذلك الملصق فوق الصورة، ثم تدمج .output() الاثنين في الملف النهائي.

هذا التصور يشرح منطق API. فالنص ليس عنصراً من HTML يطفو فوق الصورة داخل المتصفح؛ بعد التصيير يصبح جزءاً من بكسلات الصورة نفسها.

تحدد الصورة الأساسية أبعاد اللوحة النهائية. ضع النص باستخدام إزاحات البكسل top أو left أو bottom أو right؛ وإذا لم تحدد موضعاً فسيظهر في الوسط. لا يمكن ضبط left وright معاً، ولا top وbottom معاً، للطبقة نفسها. تتراوح قيمة الشفافية من 0 إلى 1، ووضع الدمج الافتراضي هو over.

يمكن ربط عدة استدعاءات لـ.draw() في سلسلة واحدة. ترتيبها هو ترتيب الطبقات، ولذلك يظهر آخر رسم في المقدمة. أضافت Cloudflare أيضاً إدخال text إلى مصفوفة cf.image.draw لعمليات التحويل المعتمدة على الروابط، لكن الربط أنسب عندما تصل الصورة الأساسية أصلاً كبايتات خام من R2 أو Cloudflare Images أو جسم الطلب أو عملية جلب أخرى.

ما ينقص هنا هو ذكاء التخطيط. توثق Cloudflare حالياً font وsize وcolor لتنسيق النص، لكنها لا توثق مربعات النص أو التفافه أو الملاءمة التلقائية أو ارتفاع السطر أو تباعد الأحرف أو المحاذاة أو الحدود الخارجية أو الظلال أو الخط البديل. لذلك على التطبيق أن يقرر مواضع فواصل الأسطر والمناطق الآمنة وكيفية التعامل مع اسم منتج أطول من اللازم.

خزّن البطاقة النهائية مؤقتاً، لا المصدر وحده

لا تُخزَّن استجابات ربط Images مؤقتاً بصورة تلقائية. من دون Workers Cache، يعيد كل طلب متكرر تشغيل Worker وفك ترميز المصدر ثم ترميزه. يتيح تفعيل التخزين المؤقت وضبط Cache-Control لـCloudflare تقديم الاستجابة النهائية من دون تكرار ذلك العمل.

يعالج التخزين المؤقت وفوترة Images مشكلتين مختلفتين. تحتسب Cloudflare تكلفة الربط بحسب التحويلات الفريدة: كل توليفة فريدة من الصورة المصدر والمعلمات تُحتسب مرة واحدة في الشهر الميلادي، ولا تضيف مرات تكرار التحويل نفسه إلى استخدام Images خلال الشهر ذاته. ومع ذلك، تبقى إصابات ذاكرة التخزين المؤقت مهمة لأنها تتجنب إعادة تنفيذ Worker وزمن معالجة الصورة.

لا تشرح Cloudflare بصورة منفصلة طريقة تطبيع النصوص ضمن حساب التفرد. لذلك يفترض التخطيط الحذر أن كل توليفة مختلفة من الصورة الأساسية والعبارة والتنسيق والمخرَج تمثل تحويلاً جديداً، إلى أن تثبت بيانات استخدامك عكس ذلك. وهكذا قد يتصرف كتالوج يضم 2,000 منتج مع 5 مقاسات للبطاقات كأنه 10,000 نسخة، حتى لو شوهدت كل بطاقة آلاف المرات.

تتغير معادلة التكلفة عندما يكون التخطيط جاهزاً لديك

تتضمن باقة Cloudflare Images Free عدد 5,000 تحويل فريد شهرياً. وفي الخطة المدفوعة، تظل أول 5,000 تحويل مشمولة، ثم تبلغ التكلفة $0.50 لكل 1,000 تحويل. وفي مثال Cloudflare نفسه على 10,000 تحويل، تصل تكلفة بند تحويلات Images إلى $2.50 للشهر.

تعرض Bannerbear حالياً خطة Automate بسعر $49 شهرياً مقابل 1,000 رصيد API، وخطة Scale بسعر $149 شهرياً مقابل 10,000 رصيد. يستهلك تصيير صورة عادية واحدة رصيداً واحداً، قبل مضاعفات الصيغ الإضافية أو القياس أو طبقات AI.

لا تمثل فجوة $146.50 وفراً جاهزاً بلا عمل. تبيع Bannerbear منتج تصميم مكتمل الوظائف يضم محرر قوالب وتكاملات وسير عمل للفرق. أما Cloudflare فتقدم مكونات التصيير الأولية التي يتعين عليك تصميمها وبرمجتها والتحقق منها ومراقبتها وصيانتها. وقد تضاف تكلفة تخزين المصدر ووقت الهندسة إلى رسوم تحويلات Images، كما أن للتخزين داخل Cloudflare Images سعراً مستقلاً.

مع ذلك، يظل القرار واضحاً. إذا كان فريقك يملك قواعد التصميم بالفعل وكانت معالجة الصور تجري على Cloudflare، فقد يصبح الاشتراك في خدمة تصيير منفصلة اختيارياً. أما إذا احتاج المسوقون إلى تحريك الطبقات بصرياً كل أسبوع، فأنت تدفع مقابل المحرر ونموذج التشغيل، لا مقابل بكسلات باهظة.

أفضل 7 حالات استخدام، مرتبة

1. بطاقات عرض منتجات الكتالوج

يستطيع بائع تجزئة لديه مئات من وحدات SKU الاحتفاظ بتخطيط خلفية واحد معتمد، ثم رسم اسم المنتج الحالي أو السعر أو ملاحظة المخزون أو العرض الترويجي على كل بطاقة. تشغّل بيانات المخزون أو الحملة Worker، ليعيد ملفاً جاهزاً للمتجر أو للشبكات الاجتماعية. تكمن الجدوى في أن تغيير السعر لم يعد ينشئ طابور تصدير يدوي، وفي إمكانية إعادة توليد التخطيط المعتمد نفسه من دون تعديل الصورة الأصلية.

أفضل استخدام هنا هو النص المحدود مسبقاً. اسم منتج من سطرين وشارة سعر واحدة عنصران يمكن التنبؤ بهما؛ أما فقرة كاملة من النص الترويجي فلا.

2. بطاقات الشبكات الاجتماعية للناشرين وأنظمة CMS

يمكن للناشر استدعاء نقطة نهاية واحدة عند نشر المقال، وتمرير العنوان أو معرّف ثابت للمقال. يجلب Worker الصورة الرئيسية ويصيّر العنوان ويعيد بطاقة Open Graph أو بطاقة الشبكات الاجتماعية. النتيجة هي تقليل صور المشاركة المفقودة أو القديمة، والاستغناء عن انتظار متصفح لالتقاط الشاشة ضمن مسار النشر.

تزداد جاذبية هذا الخيار عندما يعمل نظام CMS خلف Cloudflare بالفعل. يمكن توليد الصورة عند طبقة الحافة نفسها التي تقدمها، مع تخزين الرابط النهائي مؤقتاً لمرات المشاركة المتكررة.

3. صور حالة عناصر السوق

يستطيع أي سوق إلكتروني ختم عبارات NEW أو RESERVED أو SOLD، أو إضافة الحالة أو الموقع إلى بطاقات القوائم. تغيّر خدمة القوائم قيمة نصية صغيرة، فتنتج نقطة نهاية الصور حالة مرئية جديدة. لا يحتاج البائعون إلى تعديل صورهم الأصلية، بينما يرى المشترون الحالة داخل الصورة أينما أُدرجت البطاقة.

العائد التجاري هنا هو الدقة. فبطاقة الحالة القديمة تولد عملاً للدعم ونقرات مخيبة، بينما تستطيع طبقة حتمية أن تتغير مع السجل.

4. تصاميم الامتيازات والعروض المحلية

يمكن لمطعم أو امتياز خدمي تثبيت تكوين العلامة التجارية مع تغيير المدينة أو العرض أو التاريخ أو السعر بحسب الموقع. هكذا يتحول تعريف حملة واحد إلى نسخ محلية كثيرة، وينخفض العمل الإنتاجي المتكرر، فيما تبقى العناصر الحساسة مثل الخط واللون والموضع خارج تحكم المشغّل المحلي.

المأزق هو أسماء الأماكن الطويلة. تحتاج العملية إلى قياس عرض النصوص أو أحجام خطوط بديلة أو اختصارات معتمدة مسبقاً قبل أن تصبح الأتمتة آمنة.

5. بطاقات الفعاليات والجداول

تستطيع منصة فعاليات تصيير أسماء المتحدثين أو أوقات الجلسات أو أرقام القاعات أو حالة CANCELLED الطارئة فوق ملصق ثابت. يظل الجدول المصدر هو السجل المرجعي، ويصبح توليد البطاقة خطوة إخراج. والفائدة هي سرعة الاستجابة عندما تتغير التفاصيل قبيل الفعالية، من دون مطالبة مصمم بإعادة فتح عشرات الملفات.

6. لقطات تقارير العملاء

يمكن لمنتج تقارير وضع الفترة واسم العميل والمؤشر الأبرز فوق صورة مخطط تحمل هوية العلامة، لاستخدامها في البريد الإلكتروني أو تطبيقات المراسلة. يتخذ Worker المخطط المصيّر مسبقاً أساساً، ويضيف الملصقات القليلة المتغيرة، ثم يعيد صيغة نهائية مدمجة. يفيد ذلك عندما يتعذر على الوجهة تشغيل لوحة المعلومات نفسها.

لا تستخدم طبقة النص لرسم لوحة معلومات كاملة؛ فقوتها الحقيقية هي خطوة الوسم الحتمية الأخيرة.

7. ملصقات العمليات الداخلية

يمكن لمستودع أو فريق خدمة ميدانية أو طابور إشراف تصيير نص حالة قصير فوق صور العناصر، مثل حالة الفحص أو الدفعة أو المسار أو نتيجة المراجعة. تنتقل المعلومة المرئية بكفاءة عبر الأنظمة التي تزيل البيانات الوصفية المحيطة، فتقل الحاجة إلى البحث عندما تصل الصورة خارج سياقها.

هذه فائدة تشغيلية، وليست بديلاً عن السجل الأساسي. احتفظ بالحالة في قاعدة البيانات وتعامل مع الصورة على أنها واجهة عرض.

3 منتجات جديرة بالبناء

الفرصة الأفضل: نقطة نهاية متخصصة لبطاقات الشبكات الاجتماعية

ابنِ خدمة بطاقات آمنة للعلامة التجارية موجهة إلى الناشرين أو الوكالات أو الأنشطة متعددة المواقع التي تملك تخطيطات ثابتة، لكنها لا تريد تشغيل منظومة تصيير تعتمد على المتصفح. يقدم العميل صورة رئيسية وحقول نص معتمدة، وتعيد الخدمة روابط ثابتة لمجموعة صغيرة من نسب الأبعاد.

تقدّر بيانات الكلمات المفتاحية في الولايات المتحدة حجم البحث عن social media post maker بنحو 480 عملية شهرياً، مع تكلفة نقرة تبلغ $19.95. العبارة أوسع من نية مشتري API تحديداً، لكن ارتفاع تكلفة النقرة على نحو غير معتاد يبيّن أن الموردين يتنافسون على مهمة الإنتاج هذه. وتوفر فئتا Bannerbear الشهريتان عند $49 و$149 مرجعاً راهناً لميزانيات الفرق التي تدفع بالفعل مقابل التصيير المؤتمت.

أصغر إصدار قابل للبيع يتكون من Worker واحد، و3 تخطيطات بطاقات مقفلة، ومعاينة إدارية، وwebhook لنظام CMS، وقوائم سماح صارمة للمصادر، ومفاتيح تخزين مؤقت ثابتة، وطابور إخفاق للنصوص التي لا تلائم المساحة. بع موثوقية اتصال النشر، لا مجرد استدعاء .text() الخام.

العقبة هي ملكية القوالب. لا تمنح Cloudflare العميل محرراً بصرياً، وقد يتحول كل تخطيط جديد إلى عمل خدمي. ومع ذلك، تظل هذه أقوى فرصة لأن المكوّن الجديد يزيل المصيّر من سير عمل متكرر ذي قيمة تجارية، مع إبقاء التكامل وحوكمة العلامة التجارية بوصفهما جوهر المنتج.

محرك ملصقات ترويجية للكتالوج

ابنِ أداة تركيب تعتمد على موجز بيانات لفرق التجارة الإلكترونية، فتضيف الأسعار أو حالات التخفيض أو وعود التوصيل أو أسماء المجموعات إلى صور المنتجات. تتولى ملفات CSV أو نظام PIM أو webhook للتجارة تحديث البيانات، ولا تعيد الخدمة توليد سوى النسخ التي تغيرت.

تجذب عبارة Product label maker نحو 320 عملية بحث شهرياً في الولايات المتحدة، وتحمل نية تجارية وتكلفة نقرة قدرها $6.03 مع منافسة مرتفعة بين المعلنين. وهذا دليل على وجود طلب مدفوع حول إنشاء الملصقات، مع أن جزءاً كبيراً من نتائج الاستعلام يتعلق بالملصقات القابلة للطباعة لا برسومات الكتالوج.

يحتاج MVP إلى موصل لموجز المنتجات، ومجموعة صغيرة من الشارات الثابتة، وإعدادات مسبقة لنسب الأبعاد، ومعاينة، وقواعد للأسماء الطويلة والأسعار المفقودة. لكن النطاق هو موطن الخطر؛ فالتغليف المادي يفرض دقة الطباعة وهوامش القص والرموز الشريطية والمراجعة التنظيمية، وهي أمور لا تحلها طبقة الصور النقطية وحدها. التزم بملصقات الصور الترويجية ما لم تكن تلك الأنظمة جزءاً من المنتج.

أداة مدمجة لإضافة النص إلى الصور

ابنِ مكوّناً صغيراً للتحرير داخل منتج قائم لصناعة المحتوى أو الأسواق أو المجتمعات: يختار المستخدم صورة، ويدخل نصاً قصيراً، وينتقي من خطوط وألوان معتمدة، ويضعه ضمن منطقة آمنة، ثم يصدّر النتيجة. تتولى Cloudflare التصيير النقطي النهائي خلف واجهة المنتج نفسه.

تحصد عبارة Add text to image ما يقدّر بنحو 6,600 عملية بحث شهرياً في الولايات المتحدة. أما العبارة الأكثر ميلاً إلى الإجراء add text to image app فتحصد نحو 320 عملية بحث، وقد نمت 23 بالمئة على أساس سنوي في مجموعة البيانات نفسها. الطلب حقيقي، لكن شريحة كبيرة منه تتوقع محرراً عاماً مجانياً.

يتألف MVP من معاينة مقيدة، ومن 4 إلى 6 إعدادات نصية مسبقة، ونقطة نهاية واحدة للتصدير، ومساحة لتخزين الرابط النهائي. العقبة هي ضعف القدرة على التميز؛ فأداة عامة مستقلة تنافس محررات مجانية ناضجة. لذا تصبح الفكرة أكثر منطقية كميزة مدفوعة داخل منتج يملك الصورة والمستخدم ووجهة النشر بالفعل.

متى لا تكون الكتابة على الصور بهذه الأداة مناسبة؟

تستطيع Cloudflare Images تصيير النصوص وتركيبها، لكنها لا تقرر ما ينبغي أن يقوله النص، ولا تجعل الخطوط متجاوبة، ولا تعتمد تخطيط العلامة التجارية، ولا توفر محرر قوالب للمسوقين. إذا كانت هذه هي الأجزاء الأصعب من المهمة، فقد يظل منتج أتمتة تصميم متكامل أقل تكلفة من صيانتها داخلياً. ولرؤية أوسع لكيفية تغيير أنظمة العلامات التجارية كاملة، راجع اختبار Canva AI 2.0 لتجديد العلامة التجارية.

هناك 5 مؤشرات عملية تستدعي التوقف:

• يحتاج النص إلى التفاف متقدم أو ملاءمة تلقائية أو نص منسق، أو إلى تشكيل خاص بنظام كتابة لم تختبره مع الخط المختار.
• يحتاج المحررون إلى تحريك الطبقات بصرياً ونشر قوالب جديدة من دون مطور.
• تسمح نقطة نهاية عامة بروابط عشوائية لمصادر الصور أو الخطوط من دون قائمة سماح.
• لا يمكنك وضع حد لإنشاء النسخ، فتستهلك سلاسل الاستعلام العشوائية الحصة المجانية البالغة 5,000 تحويل، وقد تتسبب في فشل الطلبات الجديدة مع الخطأ 9422.
• يعتمد الاختبار المحلي على تصيير النص. لا يدعم تنفيذ Images المحلي منخفض الدقة سوى العرض والارتفاع والتدوير والصيغة، لذا استخدم npx wrangler dev --remote لهذه الميزة.

حدود الخط والنص صارمة: لا يجوز أن يتجاوز الخط المخصص 20 MB، ولا أن يزيد المحتوى المصيّر على 1,000 حرف، ولا أن تتجاوز طبقته النقطية 4096 في 4096 بكسل. هذه الحدود واسعة بما يكفي للملصقات والعناوين، لكنها لا تمنح إذناً بتحويل API الصور إلى محرك لتخطيط الصفحات.

إذا كنت تريد نقطة نهاية موثوقة للصور مبنية على كتالوجك أو نظام النشر لديك، فإن أنظمة إنتاج AI هي نقطة البداية المناسبة.