ثبات رسم Canvas عبر الأجهزة: اختبار أثر DPI والخطوط والتسريع الرسومي دون الاكتفاء بالهاش

لماذا هذا الاختبار مختلف عن اختبار بصمة Canvas التقليدي؟

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

عرّف السؤال القابل للقياس قبل جمع الصور

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

فرّق بين أبعاد CSS وأبعاد البكسلات الحقيقية

قد تبدو اللوحة بعرض ثابت في الصفحة، بينما يختلف عدد البكسلات الفعلي بسبب إعداد العرض أو استخدام أبعاد داخلية مختلفة عن CSS. وثّق canvas.width و canvas.height و getBoundingClientRect وقيمة window.dev icePixelRatio قبل كل رسم. لا تخلط تكبير الصفحة مع تحجيم نظام التشغيل؛ تأثير كل منهما يعتمد على طريقة بناء الاختبار. استخدم رسمًا بأبعاد داخلية ثابتة في مجموعة، ورسمًا يتبع نسبة البكسل في مجموعة ثانية. هذه المقارنة تكشف هل المشكلة من تغيير مساحة الرسم أم من طريقة تنقيط الأشكال نفسها.

اصنع مشهد اختبار يمكن إعادة إنتاجه

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

تحقق من تحميل الخط قبل الرسم

من أسباب النتائج المضللة رسم النص قبل أن يصبح الخط المطلوب متاحًا؛ فتستخدم الصفحة خطًا بديلًا في المحاولة الأولى وخطًا آخر لاحقًا. في المتصفح الذي يدعم Font Loading API انتظر document.fonts.ready وافحص document.fonts.check للخط المستهدف، ثم سجل النتيجة. لا يعني نجاح check دائمًا أن ملف الخط المحدد قد استُخدم بالطريقة التي تتخيلها، لذلك أرفق قائمة الخطوط المطلوبة واسم الخط المعلن في CSS. جرّب خط نظام معروفًا وخط ويب محليًا مرخّصًا، ولا تفسر كل اختلاف بوصفه مشكلة خصوصية.

اختبر أثر DPI والتكبير بصورة منفصلة

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

كيف تختبر أثر GPU دون تعميم؟

قد يستخدم المتصفح مسارات تسريع مختلفة بحسب الجهاز والتعريف وإعدادات التشغيل. اختبر الوضع الافتراضي أولًا، ثم وضعًا آخر مسموحًا في بيئة منفصلة، وسجّل الأعلام وإصدار المحرك ونظام التشغيل. لا تفترض أن خيار تعطيل التسريع يضمن استخدام مسار برمجي واحد في كل أجزاء الصفحة، ولا أن كل اختلاف ناتج من بطاقة الرسوميات وحدها. افصل رسم 2 D عن WebGL، لأنهما واجهتان مختلفتان. قارن أيضًا على نسخة Chrome مرجعية مطابقة لإصدار Chromium قدر الإمكان قبل نسبة الاختلاف إلى Electron أو تطبيق مبني فوقه.

قارن البكسلات لا أسماء الهاش فقط

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

مصفوفة اختبار صغيرة تكفي كبداية

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

افصل Window عن Worker و OffscreenCanvas

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

تفسير النتائج: ثبات أم اختلاف مشروع؟

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

التوثيق الذي يسمح لزميلك بإعادة التجربة

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

أخطاء شائعة وكيف تصححها

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

القرار العملي والمصادر

إذا كان هدفك اختبار استقرار الرسم بعد تحديث متصفح، قارن نفس المشهد على الإصدارين مع ضبط DPI والخطوط والتوقيت، ثم راجع خريطة الفروق قبل اعتماد التغيير. وإذا كان هدفك فهم Canvas Fingerprint عمومًا، فابدأ بدليل إيجي تاج السابق: https://egytag.com/ar/articles/canvas-fingerprint-test . تشرح MDN واجهة Canvas و ImageData و Font Loading API في https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API و https://developer.mozilla.org/en-US/docs/Web/API/ImageData و https://developer.mozilla.org/en-US/docs/Web/API/FontFaceSet/ready . هذه مراجع للواجهات وليست ضمانًا لثبات الرسم بين الأجهزة.