الكشف عن الأبعاد الأصلية للصور التي تم تغيير حجمها من جانب العميل عبر المتصفحات

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

الخيار الأول: إطلاق العنان لـ OffsetWidth وOffsetHeight

تتضمن إحدى الطرق إزالة سمات العرض والارتفاع من عنصر واسترداد عرض الإزاحة وإزاحة الارتفاع. تقضي هذه التقنية على إمكانية تجاوز أنماط CSS للأبعاد الأصلية.

const img = document.querySelector('img');
img.removeAttribute('width');
img.removeAttribute('height');
const width = img.offsetWidth;
const height = img.offsetHeight;

الخيار 2: تسخير كائنات صور JavaScript

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

const newImg = new Image();
newImg.onload = function() {
  const width = newImg.width;
  const height = newImg.height;
  // Display the dimensions in an alert for demonstration
  alert(`Original image size: ${width}px * ${height}px`);
};
newImg.src = imgSrc; // Important to set after attaching the onload handler

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

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