تحديد حجم الصورة الأصلية عبر المتصفحات

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

الخيار 1: قراءة أبعاد الصورة الديناميكية

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

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

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

مثال الكود:

function getImgSize(imgSrc) {
  var newImg = new Image();

  newImg.onload = function() {
    var height = newImg.height;
    var width = newImg.width;
    alert('The image size is '   width   '*'   height);
  };

  newImg.src = imgSrc; // Do this after setting `onload`
}

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