مقارنة الصور واكتشاف الفروقات

على المستوى الحسابي، تتضمن مقارنة صورتين نقطيتين تحليل مصفوفتي بكسل RGBA بعمق 32 بت متطابقتي الأبعاد ($W \times H$). ولكل إحداثي بكسل $(x, y)$، يستخرج المحرك مكونات ألوان الصورة أ ($R_1, G_1, B_1, A_1$) والصورة ب ($R_2, G_2, B_2, A_2$).

لتحديد ما إذا كان البكسل قد تغير، يقيّم محركنا الحد الأقصى للفارق المطلق عبر القنوات اللونية: $$\Delta_{\max} = \max\left(|R_1 - R_2|, |G_1 - G_2|, |B_1 - B_2|, |A_1 - A_2|\right)$$ في الصور الفوتوغرافية أو الخطوط الطباعية المعروضة على الويب، قد تؤدي الاختلافات الطفيفة الناتجة عن تنعيم الحواف عبر معالج الرسومات (GPU) وعيوب الضغط غير الدقيق إلى تباينات غير ملحوظة بالعين المجردة (مثل $\Delta = 1$ أو $2$). ولمنع النتائج الإيجابية الخاطئة، توفر أداتنا عتبة تسامح قابلة للتعديل (من 0 إلى 255). وتُصنف فقط البكسلات التي يتجاوز فارقها هذه العتبة على أنها مختلفة، مما يضمن إبراز تحولات واجهة المستخدم الحقيقية مع تجاهل الضوضاء الخلفية التافهة.

تتطلب مهام ضمان الجودة البصرية (QA) المختلفة زوايا نظر متباينة للمقارنة. تدمج أداتنا ثلاثة أوضاع فحص متخصصة: • شريط التمرير المقسم التفاعلي: شريط تمرير كلاسيكي لعرض ما قبل وما بعد يضع الصورة ب مباشرة فوق الصورة أ مع مقسم رأسي قابل للسحب. وهو مثالي لتقييم تعديلات تدرج الألوان، والرتوش الفنية، وجودة الضغط جنباً إلى جنب. • مزج شفافية قشر البصل (Onion-Skin): يطابق الصورتين مع شريط تمرير شفافية تفاعلي (من 0% إلى 100% عتامة). يتميز هذا الوضع بفاعلية استثنائية في اكتشاف تحولات التخطيط، وتعديلات الحواشي الداخلية (Padding) غير المقصودة، والتحركات الطفيفة في أماكن النصوص التي قد تخفيها رؤية المقارنة جنباً إلى جنب. • خريطة الفروق الحرارية (قناع Pixelmatch): عرض تشخيصي عالي التباين. يتم تحويل البكسلات غير المتغيرة إلى صورة مرجعية بتدرج رمادي منخفض التباين، بينما تضاء البكسلات المختلفة بألوان أرجوانية (Magenta) أو حمراء أو صفراء ساطعة. يوجه هذا انتباهك فوراً إلى المناطق الدقيقة التي وقعت فيها الاختلافات.

يمثل اختبار الانحدار البصري حجر الزاوية لضمان جودة الواجهات الأمامية في مسارات التكامل والنشر المستمر (CI/CD). فعندما يعيد المطورون هيكلة متغيرات CSS العامة، أو يحدثون تكوينات Tailwind، أو يطورون أنظمة تصميم واجهة المستخدم (مثل Material UI أو Radix)، تعجز اختبارات الأكواد البرمجية الآلية عن التحقق مما إذا كانت الأزرار أو النوافذ المنبثقة أو الخطوط قد تحركت بشكل غير مقصود.

تلتقط فرق الواجهات الأمامية لقطات شاشة مرجعية لصفحات الويب بصورة دورية وتقارنها مع إصدارات طلبات السحب (Pull Requests) المنشأة حديثاً باستخدام تقنيات المقارنة البصرية. توفر أداتنا بيئة عمل سريعة وسلسة لمطوري الواجهات ومهندسي الجودة لفحص أخطاء الانحدار البصري محلياً دون الحاجة لتهيئة بيئات المتصفحات الخفية المعقدة (Headless Browsers) أو الاشتراك في حزم الاختبارات السحابية المدفوعة.

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

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

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

تتضمن أداتنا معيارية ذكية للوحة الرسم. فعند تحميل صور غير متساوية الأبعاد، يضبط المحرك مقاس لوحة الرسم أو يضيف حواشي إليها لتتطابق مع أكبر إطار محيط `[max(W1, W2), max(H1, H2)]`، مع تثبيت الصور عند نقطة الأصل العلوية اليسرى أو توسيطها. وتُبرز المناطق الحدودية الزائدة بوضوح تام، مما يمكنك من عزل التغييرات الداخلية في المحتوى عن التوسع الإجمالي للوحة.

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

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

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

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