عارض فرق الصور

أربع طرق للمقارنة

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

مقياس فرق البكسلات

بدلاً من الطرح RGB الساذج، يستخدم وضع فرق البكسلات مقياس YIQ للمسافة اللونية — وهو نفس الأسلوب المستخدم في مكتبة pixelmatch الشهيرة. يفصل YIQ السطوع (Y) عن الصفاء اللوني (I, Q)، وهو ما يتوافق مع كيفية إدراك العين البشرية للاختلاف. يتحكم منزلق العتبة الواحد في حجم الاختلاف المطلوب قبل تمييز البكسل.

سيناريوهات شائعة

1. اختبار انحدار واجهة المستخدم — قارن لقطة شاشة قبل وبعد تغيير في الكود.
2. مراجعة التصميم — تحقق من أن بناء المطوّر يطابق النموذج.
3. ضمان جودة ضغط الصور — شاهد بدقة أي المناطق غيّرها جهاز الترميز.
4. تعديلات الصور — تأكد من أي البكسلات لمستها عملية التنقيح.

كل شيء يعمل على Canvas API في متصفحك — بدون رفع، وبدون انتظار.