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

أنشئ تخطيطًا لمقارنة الصور قبل التعديل وبعده

أنشئ تخطيطًا دقيقًا لمقارنة الصور قبل التعديل وبعده من دون تخمين الإحداثيات في شيفرة الواجهة.

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

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

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

اختر تنسيق المقارنة الملائم للقصة

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

عالج اختلاف الأبعاد بصورة صريحة

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

حوّل بيانات الفاصل إلى واجهة قابلة للاستخدام

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

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

توثيق أعمال التجديد

رتّب صور الغرفة المتحاذية في لوحتين كاملتين متجاورتين أو ضمن منزلق تفاعلي يكشف النتيجة.

عرض نتيجة تحرير صورة

أنشئ مناطق قص دقيقة لمعاينة التنقيح أو الترميم أو تدريج الألوان أو إزالة الخلفية.

توحيد مكوّنات المقارنة

زوّد عارضي الويب والهاتف بمساحة الرسم والمستطيلات وخطة التحجيم وهندسة الفاصل الحتمية نفسها.

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

ما تكلفة طلب API؟

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

هل تعدّل هذه الأداة صوري أو ترفعها؟

لا. فهي تستقبل الأبعاد فقط وتعيد إحداثيات التخطيط، ولا تقرأ بيانات الصور أو تنقلها أو تخزنها أو تعرضها.

ماذا يحدث عندما تختلف الأبعاد؟

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

كيف يُحسب بكسل فاصل المنزلق؟

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

هل تؤثر نسبة الفاصل في الوضع المتجاور؟

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

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

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

الـEndpoint

POSThttps://api.kit.forhosting.com/image/compare-before-after-layout

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

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

curl -X POST https://api.kit.forhosting.com/image/compare-before-after-layout \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"before_width":1200,"before_height":800,"after_width":1200,"after_height":800}'

const res = await fetch("https://api.kit.forhosting.com/image/compare-before-after-layout", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "before_width": 1200,
    "before_height": 800,
    "after_width": 1200,
    "after_height": 800
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/image/compare-before-after-layout",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "before_width": 1200,
    "before_height": 800,
    "after_width": 1200,
    "after_height": 800
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/image/compare-before-after-layout", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"before_width":1200,"before_height":800,"after_width":1200,"after_height":800}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"before_width":1200,"before_height":800,"after_width":1200,"after_height":800}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/image/compare-before-after-layout", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

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

{
  "before_width": 1200,
  "before_height": 800,
  "after_width": 1200,
  "after_height": 800
}

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

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "image.compare_before_after_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 الكامل ←