ForHosting KIT · تحرير الصور وتحليلها

إنشاء تخطيط كولاج وحساب مواضع الخلايا

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

● Betaمجاني · داخل متصفحك

شغّل الأداة مجانًا اطّلع على الـAPI

استخدمها من الويبAPIالبريدTelegramالتطبيق قريبًا

جهّزوا الأبعاد بترتيب الصفوف

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

تعرّفوا إلى طريقة حساب أحجام الخلايا

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

استخدموا النتيجة في مسار التصيير

اقرؤوا مصفوفة cells بالترتيب نفسه المستخدم لصور الإدخال. يتضمن كل عنصر الفهرس والصف والعمود ابتداءً من الصفر، وإحداثيي الأصل x و y، وعرض الخلية وارتفاعها، وعرض الصورة الأصلية وارتفاعها. يستطيع مصيّر canvas الرسم داخل كل مستطيل، ويستطيع مولّد CSS تحويل column_widths و row_heights إلى مسارات شبكة صريحة، كما يستطيع منشئ SVG إعداد مستطيلات القص قبل إدراج عناصر الصور. ولأن المخرجات حتمية ولا تحتوي على قيم تعتمد على البيئة، ينتج الطلب نفسه هندسة متطابقة في المتصفح أو أثناء البناء أو عبر API. لتوسيط الصورة من دون تغيير حجمها، اطرحوا أبعادها الأصلية من أبعاد الخلية واقسموا كل فرق على اثنين. ولتطبيق سلوك cover أو contain، احسبوا معامل القياس من نسب أبعاد الخلية والصورة. إن فصل هذه السياسات يبقي الحساب واضحاً وقابلاً للاختبار وإعادة الاستخدام.

حالات الاستخدام

إنشاء كولاج صور على canvas

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

توليد مسارات CSS Grid صريحة

حوّلوا عروض الأعمدة وارتفاعات الصفوف المعادة إلى قالب شبكة يطابق أكبر صورة في كل مسار.

تخطيط ورقة صور مصغرة بصيغة SVG

أنشئوا الخلايا و viewBox الكلي قبل إضافة عناصر الصور أو التسميات أو مسارات القص أو الحدود.

الأسئلة الشائعة

ما التكلفة؟

تبلغ تكلفة كل طلب API ‏$0.002. ويمكن أيضاً تنفيذ الحساب داخل المتصفح.

كيف يُختار عرض كل عمود؟

يستخدم كل عمود أكبر عرض أصلي بين الصور المخصصة لذلك العمود.

كيف يُختار ارتفاع كل صف؟

يستخدم كل صف أكبر ارتفاع أصلي بين الصور المخصصة لذلك الصف.

هل تغيّر الحاسبة حجم الصور أو تقصها؟

لا. فهي تحسب هندسة الخلايا وتحفظ أبعاد المصدر. أما تغيير الحجم والقص والتوسيط والمحاذاة فهي قرارات خاصة بالتصيير.

ماذا يحدث إذا لم يطابق عدد الصور شكل الشبكة؟

يفشل الطلب بخطأ إدخال غير صالح يوضح أن عدد الصور يجب أن يساوي حاصل ضرب rows في cols.

للمطوّرين — الوصول عبر API

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

الـEndpoint

POSThttps://api.kit.forhosting.com/image/collage-layout

صادِق على طلبك بترويسة Bearer، وأرسل طلب POST واحدًا لتدخل مهمتك قائمة التنفيذ فورًا؛ ثم تستلم النتيجة عبر webhook أو رابط موقّع.

استدعِ الخدمة من بيئتك

curl -X POST https://api.kit.forhosting.com/image/collage-layout \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"images":[{"width":640,"height":480},{"width":800,"height":600},{"width":500,"height":700},{"width":720,"height":540}],"rows":2,"cols":2}'

const res = await fetch("https://api.kit.forhosting.com/image/collage-layout", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "images": [
      {
        "width": 640,
        "height": 480
      },
      {
        "width": 800,
        "height": 600
      },
      {
        "width": 500,
        "height": 700
      },
      {
        "width": 720,
        "height": 540
      }
    ],
    "rows": 2,
    "cols": 2
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/image/collage-layout",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "images": [
        {
            "width": 640,
            "height": 480
        },
        {
            "width": 800,
            "height": 600
        },
        {
            "width": 500,
            "height": 700
        },
        {
            "width": 720,
            "height": 540
        }
    ],
    "rows": 2,
    "cols": 2
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/image/collage-layout", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"images":[{"width":640,"height":480},{"width":800,"height":600},{"width":500,"height":700},{"width":720,"height":540}],"rows":2,"cols":2}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"images":[{"width":640,"height":480},{"width":800,"height":600},{"width":500,"height":700},{"width":720,"height":540}],"rows":2,"cols":2}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/image/collage-layout", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

مثال على الطلب

{
  "images": [
    {
      "width": 640,
      "height": 480
    },
    {
      "width": 800,
      "height": 600
    },
    {
      "width": 500,
      "height": 700
    },
    {
      "width": 720,
      "height": 540
    }
  ],
  "rows": 2,
  "cols": 2
}

مثال على الاستجابة

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "image.collage_layout",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

الواجهة غير متزامنة: تستلم task_id فور الإرسال، ويمكنك الاستعلام عن الحالة بمعدل طلب واحد في الثانية.

الأسعار

لكل طلب$0.002

السعر معلن كما تراه: لا tokens ولا نظام نقاط؛ وإن فشلت المهمة فلن تُحاسَب عليها.

الحدود

`max_mb`	15
`max_megapixels`	12

الأخطاء

HTTP	الرمز	المعنى
`401`	`unauthorized`	مفتاح الوصول مفقود أو غير صالح؛ تحقق من ترويسة Bearer في طلبك.
`402`	`insufficient_balance`	رصيدك لا يكفي لتنفيذ هذه المهمة؛ أعد شحن الرصيد ثم أعد المحاولة.
`404`	`unknown_type`	نوع المهمة المطلوب غير موجود في الكتالوج — راجع الاسم المرسل في الطلب.
`429`	`rate_limited`	تجاوزت الحد المسموح من الطلبات؛ انتظر قليلًا ثم أعد المحاولة.

اطّلع على توثيق KIT الكامل ←