js和jquery如何获取图片真实的宽度和高度

获取图片真实宽度和高度是前端开发中一个常见的需求，在JavaScript和jQuery中有多种方法可以实现。

使用原生JavaScript获取图片真实宽度和高度

1. 使用Image对象的naturalWidth和naturalHeight属性

使用Image对象的naturalWidth和naturalHeight属性可以获取图片的原始宽度和高度，如下所示：

var img = new Image();
img.src = 'example.jpg';
img.onload = function() {
  console.log('图片的原始宽度：' + img.naturalWidth);
  console.log('图片的原始高度：' + img.naturalHeight);
};

1. 创建一个隐藏的元素并读取其宽度和高度

创建一个隐藏的元素，将要获取其真实宽高的图片资源赋值给该元素的src属性，并在onload事件中读取元素的宽度和高度，如下所示：

var img = document.createElement('img');
img.style.display = 'none';
img.src = 'example.jpg';
document.body.appendChild(img);
img.onload = function() {
  console.log('图片的真实宽度：' + img.width);
  console.log('图片的真实高度：' + img.height);
};

使用jQuery获取图片真实宽度和高度

1. 使用prop()方法获取图片原始宽度和高度

使用jQuery的prop()方法获取图片的原始宽度和高度，如下所示：

var img = $('<img>');
img.prop('src', 'example.jpg');
img.on('load',function() {
  console.log('图片的原始宽度：' + img.prop('naturalWidth'));
  console.log('图片的原始高度：' + img.prop('naturalHeight'));
});

1. 创建一个隐藏的元素并读取其宽度和高度

与原生JavaScript中的方法相同，创建一个隐藏的元素，将要获取其真实宽高的图片资源赋值给该元素的src属性，并在onload事件中读取元素的宽度和高度，如下所示：

var img = $('<img>');
img.css('display', 'none');
img.prop('src', 'example.jpg');
$('body').append(img);
img.on('load', function() {
  console.log('图片的真实宽度：' + img.width());
  console.log('图片的真实高度：' + img.height());
});

以上就是获取图片真实宽度和高度的方法，需要根据具体的场景和需求选择不同的方法。