عرض الصورة:مقطّع

بول كينلان

بصفتنا مطورين على الويب، نتعامل مع الصور طوال الوقت وفي معظم الحالات، تكون المتصفحات رائعة في توسيع نطاق الصور لتناسب حدود تصميمات موقعنا مع الحفاظ على جمال الصور. ولكن ماذا يحدث عندما تريد التحكم في كيفية ضبط المتصفح للصور على صفحتك؟

يقدم Chrome 41 (الإصدار التجريبي في كانون الثاني (يناير) 2015) خاصية CSS جديدة image-rendering: pixelated (المواصفات) التي تمنحك قدرًا أكبر من التحكم في كيفية عرض المتصفح لصورة أكبر حجمًا.

إنّ خاصية CSS image-rendering والقيمة pixelated مثيرتان للاهتمام لأنّهما يوقفان الضبط السلس العادي للمتصفّح (الاستيفاء ثنائي الخط في العادة) ويستبدلهما بخوارزمية أخرى للتوسُّع (الجار الأقرب في معظم الحالات) عند تغيير حجم الصور.

تخيل أن لديك صورة بحجم 2×2 بكسل وقمت بتكبيرها إلى 100×100 بكسل، وسيقوم المتصفح بعرضها بطريقة لا تجعلها تبدو مشوشة. شيء مثل:

العرض السلس

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

للحصول على هذا التأثير، يمكنك ببساطة تطبيق image-rendering: pixelated; على الصورة على النحو التالي.

<img
    style="image-rendering: pixelated;"
    width="100" height="100"
    src="data:image/png;base64,iVBORw0KGgoAAAA....Ik2kAAAAASUVORK5CYII=">
العرض القائم على وحدات البكسل

تجربة الإصدار التجريبي وكما ترى، يؤثر تطبيق الخاصية بشكل كبير في طريقة عرض الصورة.

يمكن تطبيق هذه السمة في عدة أماكن:

  • <img> من العناصر
  • <canvas style="image-rendering: pixelated"> من العناصر
  • أي عنصر يتضمّن السمة background-image

لِسَّهْ مَفْهِمْتِشْ. أين يمكنني استخدام هذا؟

إذا كنت تعرض صورًا على موقعك فقط، فأنت على الأرجح لا تريدها.

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

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

إذا كنت مهتمًا بالاطّلاع على عملية التنفيذ، يُرجى مراجعة المشكلة 317991 (يُترك الحقل مفتوحًا لتنفيذ قيمة الحواف الواضحة. ضع إشارة نجمة على المشكلة لتتبع التنفيذ).