قست مكان العنصر في صفحة الموقع لكن القص من لقطة الشاشة جاء في مكان خاطئ، لماذا؟
لأن أداة القص تستخدم بكسلات الصورة الحقيقية، بينما قستَ أنت ببكسلات الصفحة. على الشاشات عالية الكثافة تحتوي لقطة الشاشة غالبًا بكسلين أو أكثر من بكسلات الصورة مقابل كل بكسل في الصفحة. فعنصر في الموضع 100 و50 بمقاس 300 × 200 داخل الصفحة يكون في الصورة عند X = 200 وY = 100 بمقاس 600 × 400 إذا كان المعامل 2.
نوعان من البكسل
أدوات المطور في المتصفح وقياسات CSS تتحدث ببكسلات الصفحة، وهي وحدة ثابتة لا تتغير بتغير الشاشة. أما لقطة الشاشة فتُحفظ ببكسلات الشاشة الفعلية. على شاشة عادية يتساوى الاثنان، لكن على شاشات الحواسيب والجوالات عالية الكثافة يقابل كل بكسل في الصفحة مربعًا من 2 × 2 أو 3 × 3 بكسلات في اللقطة.
قص الصور لا يعرف شيئًا عن الصفحة التي صورتها. حقول «X من اليسار» و«Y من الأعلى» والعرض والارتفاع كلها بكسلات الصورة الأصلية كما حُفظت. لذلك إذا كتبت قياسات الصفحة كما هي، يقع الإطار أعلى العنصر وإلى يساره، وبنصف مقاسه.
كيف تعرف المعامل
- افتح لقطة الشاشة في أداة القص. يظهر فوقها سطر فيه أبعاد الصورة، مثلًا 2880 × 1800.
- في المتصفح الذي صورت منه الصفحة، اعرف عرض النافذة ببكسلات الصفحة، مثلًا من أدوات المطور. لنفترض أنه 1440.
- اقسم الأول على الثاني: 2880 ÷ 1440 = 2. هذا هو المعامل.
- إذا كانت اللقطة لجزء من الشاشة لا للنافذة كاملة، فاستخدم عنصرًا تعرف عرضه في الصفحة وقسه في الصورة.
حوّل القياسات ثم اقصص
عنصر في الصفحة عند 100 و50، ومقاسه 300 × 200 بكسل صفحة، والمعامل 2.
اضرب كل رقم في 2: X = 200 وY = 100 والعرض 600 والارتفاع 400.
مع النسبة «حرة» اكتب العرض والارتفاع أولًا ثم X وY، فيخرج ملف 600 × 400 يحيط بالعنصر تمامًا.
انتبه إلى أن X يُقاس من يسار الصورة وY من أعلاها، حتى لو كانت الصفحة عربية من اليمين إلى اليسار. إذا قست موضع العنصر من اليمين في صفحة عربية، فاحسب X بطرح موضعه وعرضه من عرض الصفحة أولًا.
إذا احتجت الملف بمقاس الصفحة
الناتج 600 × 400 أكثر وضوحًا من العنصر كما يظهر على شاشة عادية، وهو مفيد للعرض على الشاشات عالية الكثافة. لكن إن احتجت صورة بمقاس الصفحة نفسه، 300 × 200، فافتح الملف في تغيير أبعاد الصور واكتب العرض 300 مع قفل النسبة، فيصبح الارتفاع 200.
أخطاء شائعة أخرى
- تكبير الصفحة في المتصفح يغير عدد بكسلات اللقطة لكل بكسل صفحة. صوّر بتكبير 100% حتى يكون المعامل واضحًا.
- لقطات الجوال لها معامل خاص بالجهاز، فلا تفترض الرقم 2، بل احسبه بالطريقة نفسها.
- حفظ لقطة شاشة فيها نص بصيغة JPEG قد يترك آثارًا حول الحروف. اختر PNG في «صيغة الحفظ».
أسئلة شائعة
هل تقبل الحقول أرقامًا عشرية؟
لا. حقول الموضع والمقاس أعداد صحيحة لأن البكسل لا يُقسم. قرّب الناتج بعد الضرب إن لزم.
هل أستطيع كتابة إحداثيات من الزاوية اليمنى؟
لا. X يُقاس دائمًا من يسار الصورة، وY من أعلاها.
هل تُرفع لقطة الشاشة إلى خادم؟
لا، القص يتم داخل متصفحك.