是否有JavaScript或jQuery API或方法来获取页面上图像的尺寸?


当前回答

Use

function outmeInside() {
    var output = document.getElementById('preview_product_image');

    if (this.height < 600 || this.width < 600) {
        output.src = "http://localhost/danieladenew/uploads/no-photo.jpg";
        alert("The image you have selected is low resolution image. Your image width=" + this.width + ", height=" + this.height + ". Please select image greater or equal to 600x600. Thanks!");
    }
    else {
        output.src = URL.createObjectURL(event.target.files[0]);
    }
    return;
}



    img.src = URL.createObjectURL(event.target.files[0]);
}

这适用于多个图像预览和上传。如果你必须为每个图像逐一选择,然后复制粘贴到所有预览图像功能和验证!!

其他回答

clientWidth和clienttheight是DOM属性,显示DOM元素内部维度的当前浏览器大小(不包括边距和边框)。在IMG元素的情况下,这将得到可见图像的实际尺寸。

var img = document.getElementById('imageid'); 
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;

要得到自然的高度和宽度:

.naturalHeight document.querySelector (img); .naturalWidth document.querySelector (img); < img src = " img.png " >

如果你想获取样式的高度和宽度:

document.querySelector(“img”).offsetHeight; document.querySelector(“img”).offsetWidth;

我想我改进了源代码,以便能够在尝试找出其属性之前让图像加载。否则,它将显示'0 * 0',因为下一个语句将在文件加载到浏览器之前被调用。它需要jQuery…

function getImgSize(imgSrc) {
    var newImg = new Image();
    newImg.src = imgSrc;
    var height = newImg.height;
    var width = newImg.width;
    p = $(newImg).ready(function() {
        return {width: newImg.width, height: newImg.height};
    });
    alert (p[0]['width'] + " " + p[0]['height']);
}

你还可以使用:

var image=document.getElementById("imageID");
var width=image.offsetWidth;
var height=image.offsetHeight;

使用jQuery,你可以这样做:

var imgWidth = $("#imgIDWhatever").width();