jquery 获取图片的宽高

以下是两种获取图片宽高的方法：

1. 使用jQuery的load()方法：

$('#pic').load(function(){
    var img = new Image();
    img.src = $(this).attr("src");
    var w = img.width;
    var h = img.height;
    $('#pic_info').html("（图片尺寸："+w+"x"+h+"）");
})

2. 使用jQuery的change()方法和File API：

var _URL = window.URL || window.webkitURL;
$("#file").change(function (e) {
    var file, img;
    if ((file = this.files[0])) {
        img = new Image();
        img.onload = function () {
            var w = this.width;
            var h = this.height;
            // 在这里可以使用获取到的宽高进行后续操作
        };
        img.src = _URL.createObjectURL(file);
    }
});

相关问题

jquery获取图片的宽高

要使用jQuery获取图片的宽高，可以使用以下方法：

方法一：通过加载事件获取宣传图的宽高

$('#pic').load(function(){
    var img = new Image();
    img.src = $(this).attr("src");
    var w = img.width;
    var h = img.height;
    $('#pic_info').html("（图片尺寸：" + w + "x" + h + "）");
});

方法二：通过设置图片的CSS属性来获取真实图片的宽高

public setImgW() {
    var imgSrc = $(".parkImg").attr("src");
    this.getImageWidth(imgSrc, function (w, h) {
        console.log({ width: w, height: h });
        if (w > 900) {
            $('.parkImg').css({ 'height':'40%','position':'relative','top':'28%'});
        } else if (w > 899 && w < 798) {
            $('.parkImg').css('height','50%');
        } else if (w > 799) {
            $('.parkImg').css({ 'height':'90%','position':'relative','top':'5%'});
        }
    });
}

//获取图片宽高
public getImageWidth(url, callback) {
    var img = new Image();
    img.src = url;
    // 如果图片被缓存，则直接返回缓存数据
    if (img.complete) {
        callback(img.width, img.height);
    } else {
        // 完全加载完毕的事件
        img.onload = function () {
            callback(img.width, img.height);
        }
    }
}

方法三：通过改变input file的值来获取图片宽高

var _URL = window.URL || window.webkitURL;
$("#file").change(function (e) {
    var file, img;
    if ((file = this.files

js获取页面图片宽高大小

要通过JavaScript获取页面图片的宽高大小，可以使用不同的方法。一种常见的方法是使用jQuery的`.width()`和`.height()`方法来获取图片的宽度和高度。这些方法可以直接应用于图片元素，例如`$('img').width()`和`$('img').height()`。\[2\]

另一种方法是使用JavaScript的`.offsetWidth`和`.offsetHeight`属性来获取图片的宽度和高度。这些属性返回的是元素在页面中的实际宽度和高度，包括边框和内边距。例如，可以通过`document.querySelector('img').offsetWidth`和`document.querySelector('img').offsetHeight`来获取图片的宽度和高度。\[2\]

还有一种方法是直接通过图片元素的属性值`.width`和`.height`来获取宽度和高度。如果图片元素没有设置这些属性，它们将返回0。例如，可以通过`document.querySelector('img').width`和`document.querySelector('img').height`来获取图片的宽度和高度。\[3\]

需要注意的是，使用这些方法获取图片的宽高大小时，确保在图片加载完成后再进行获取，以避免获取到不准确的值。可以使用`window.onload`事件或者`img.onload`事件来确保图片已经加载完成。\[2\]
#### 引用[.reference_title]
- *1* *2* [Android 获取图片真实宽高](https://blog.csdn.net/weixin_35690047/article/details/112889680)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [JS获取img图片的原始尺寸高度和宽度](https://blog.csdn.net/mouday/article/details/124845668)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]