Làm cách nào để có được kích thước hình ảnh (chiều cao và chiều rộng) bằng cách sử dụng JavaScript?

Có bất kỳ API hoặc phương pháp JavaScript hoặc jQuery nào để có được kích thước của hình ảnh trên trang không?

Bạn có thể lập trình lấy hình ảnh và kiểm tra kích thước bằng Javascript ...

var img = new Image();
img.onload = function() {
  alert(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';

Điều này có thể hữu ích nếu hình ảnh không phải là một phần của đánh dấu.

clientWidth và clientHeight là các thuộc tính DOM hiển thị kích thước trong trình duyệt hiện tại của kích thước bên trong của phần tử DOM (không bao gồm lề và viền). Vì vậy, trong trường hợp của một phần tử IMG, điều này sẽ có được kích thước thực tế của hình ảnh hiển thị.

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

Ngoài ra (ngoài câu trả lời của Rex và Ian) còn có:

imageElement.naturalHeight

và

imageElement.naturalWidth

Chúng cung cấp chiều cao và chiều rộng của chính tệp hình ảnh (chứ không chỉ là phần tử hình ảnh).

Nếu bạn đang sử dụng jQuery và bạn đang yêu cầu kích thước hình ảnh, bạn phải đợi cho đến khi chúng tải hoặc bạn sẽ chỉ nhận được số không.

$(document).ready(function() {
    $("img").load(function() {
        alert($(this).height());
        alert($(this).width());
    });
});

Tôi nghĩ rằng một cập nhật cho những câu trả lời rất hữu ích bởi vì một trong các câu trả lời tốt nhất-bình chọn cho thấy sử dụng clientWidthvà clientHeight, mà tôi nghĩ bây giờ đã lỗi thời.

Tôi đã thực hiện một số thử nghiệm với HTML5, để xem giá trị nào thực sự được trả về.

Trước hết, tôi đã sử dụng một chương trình có tên Dash để có cái nhìn tổng quan về API hình ảnh. Nó nói rằng heightvà widthlà đỉnh cao render / chiều rộng của hình ảnh và điều đó naturalHeightvà naturalWidthlà chiều cao bên trong / chiều rộng của hình ảnh (và chỉ là HTML5).

Tôi đã sử dụng hình ảnh của một con bướm xinh đẹp, từ một tệp có chiều cao 300 và chiều rộng 400. Và Javascript này:

var img = document.getElementById("img1");

console.log(img.height,           img.width);
console.log(img.naturalHeight,    img.naturalWidth);
console.log($("#img1").height(),  $("#img1").width());

Sau đó, tôi đã sử dụng HTML này, với CSS nội tuyến cho chiều cao và chiều rộng.

<img style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />

Các kết quả:

/*Image Element*/ height == 300         width == 400
           naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() == 120       width() == 150

/*Actual Rendered size*/    120                  150

Sau đó tôi đã thay đổi HTML thành như sau:

<img height="90" width="115" id="img1" src="img/Butterfly.jpg" />

tức là sử dụng các thuộc tính chiều cao và chiều rộng thay vì kiểu nội tuyến

Các kết quả:

/*Image Element*/ height ==  90         width == 115
           naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() ==  90       width() == 115

/*Actual Rendered size*/     90                  115

Sau đó tôi đã thay đổi HTML thành như sau:

<img height="90" width="115" style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />

tức là sử dụng cả hai thuộc tính và CSS, để xem cái nào được ưu tiên.

Các kết quả:

/*Image Element*/ height ==  90         width == 115
           naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() == 120       width() == 150

/*Actual Rendered size*/    120                  150

Sử dụng JQuery, bạn làm điều này:

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

Điều mà tất cả những người khác đã quên là bạn không thể kiểm tra kích thước hình ảnh trước khi tải. Khi kiểm tra tác giả tất cả các phương pháp đăng nó sẽ làm việc có lẽ chỉ trên localhost. Vì jQuery có thể được sử dụng ở đây, hãy nhớ rằng sự kiện 'sẵn sàng' được kích hoạt trước khi hình ảnh được tải. $ ('# xxx'). width () và .height () nên được kích hoạt trong sự kiện onload trở lên.

Bạn chỉ có thể thực sự làm điều này bằng cách sử dụng một cuộc gọi lại của sự kiện tải vì kích thước của hình ảnh không được biết cho đến khi nó thực sự tải xong. Một cái gì đó giống như mã dưới đây ...

var imgTesting = new Image();

function CreateDelegate(contextObject, delegateMethod)
{
    return function()
    {
        return delegateMethod.apply(contextObject, arguments);
    }
}

function imgTesting_onload()
{
    alert(this.width + " by " + this.height);
}


imgTesting.onload = CreateDelegate(imgTesting, imgTesting_onload);
imgTesting.src = 'yourimage.jpg';

Với jQuery library-

Sử dụng .width()và .height().

Thêm về chiều rộng của jQuery và chiều cao của jQuery .

Mã ví dụ-

$(document).ready(function(){
    $("button").click(function()
    {
        alert("Width of image: " + $("#img_exmpl").width());
        alert("Height of image: " + $("#img_exmpl").height());
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<img id="img_exmpl" src="http://images.all-free-download.com/images/graphicthumb/beauty_of_nature_9_210287.jpg">
<button>Display dimensions of img</button>

ok guys, tôi nghĩ rằng tôi đã cải thiện mã nguồn để có thể cho phép tải hình ảnh trước khi cố gắng tìm ra các thuộc tính của nó, nếu không nó sẽ hiển thị '0 * 0', bởi vì câu lệnh tiếp theo sẽ được gọi trước khi tệp được tải vào Trình duyệt. Yêu cầu 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']);
}

Giả sử, chúng tôi muốn có được kích thước hình ảnh của <img id="an-img" src"...">

// Query after all the elements on the page have loaded.
// Or, use `onload` on a particular element to check if it is loaded.
document.addEventListener('DOMContentLoaded', function () {
  var el = document.getElementById("an-img");

  console.log({
    "naturalWidth": el.naturalWidth, // Only on HTMLImageElement
    "naturalHeight": el.naturalHeight, // Only on HTMLImageElement
    "offsetWidth": el.offsetWidth,
    "offsetHeight": el.offsetHeight
  });

Kích thước tự nhiên

el.naturalWidthvà el.naturalHeightsẽ cho chúng ta kích thước tự nhiên , kích thước của tệp hình ảnh.

Kích thước bố trí

el.offsetWidthvà el.offsetHeightsẽ cho chúng ta các kích thước mà phần tử được hiển thị trên tài liệu.

Trước khi sử dụng kích thước hình ảnh thực, bạn nên tải hình ảnh nguồn. Nếu bạn sử dụng khung JQuery, bạn có thể có được kích thước hình ảnh thực theo cách đơn giản.

$("ImageID").load(function(){
  console.log($(this).width() + "x" + $(this).height())
})

Đây câu trả lời là chính xác những gì tôi đang tìm kiếm (trong jQuery):

var imageNaturalWidth = $('image-selector').prop('naturalWidth');
var imageNaturalHeight = $('image-selector').prop('naturalHeight');

Bạn có thể có một chức năng đơn giản như sau ( imageDimensions()) nếu bạn không sợ sử dụng lời hứa .

// helper to get dimensions of an image
const imageDimensions = file => new Promise((resolve, reject) => {
    const img = new Image()

    // the following handler will fire after the successful parsing of the image
    img.onload = () => {
        const { naturalWidth: width, naturalHeight: height } = img
        resolve({ width, height })
    }

    // and this handler will fire if there was an error with the image (like if it's not really an image or a corrupted one)
    img.onerror = () => {
        reject('There was some problem with the image.')
    }
    
    img.src = URL.createObjectURL(file)
})

// here's how to use the helper
const getInfo = async ({ target: { files } }) => {
    const [file] = files
 
    try {
        const dimensions = await imageDimensions(file)
        console.info(dimensions)
    } catch(error) {
        console.error(error)
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script>

Select an image:
<input
  type="file"
  onchange="getInfo(event)"
/>
<br />
<small>It works offline.</small>

Câu trả lời của JQuery:

$height = $('#image_id').height();
$width  = $('#image_id').width();

Nghĩ rằng điều này có thể hữu ích cho một số người đang sử dụng Javascript và / hoặc Bản in năm 2019.

Tôi thấy những điều sau đây, như một số người đã gợi ý, là không chính xác:

let img = new Image();
img.onload = function() {
  console.log(this.width, this.height) // Error: undefined is not an object
};
img.src = "http://example.com/myimage.jpg";

Chính xác:

let img = new Image();
img.onload = function() {
  console.log(img.width, img.height)
};
img.src = "http://example.com/myimage.jpg";

Phần kết luận:

Sử dụng img, khôngthis , trong onloadchức năng.

Gần đây tôi đã có cùng một vấn đề đối với một lỗi trong thanh trượt flex. Chiều cao của hình ảnh đầu tiên được đặt nhỏ hơn do độ trễ tải. Tôi đã thử phương pháp sau để giải quyết vấn đề đó và nó đã hoạt động.

// create image with a reference id. Id shall be used for removing it from the dom later.
var tempImg = $('<img id="testImage" />');
//If you want to get the height with respect to any specific width you set.
//I used window width here.
tempImg.css('width', window.innerWidth);  
tempImg[0].onload = function () {
    $(this).css('height', 'auto').css('display', 'none');
    var imgHeight = $(this).height();
    // Remove it if you don't want this image anymore.
    $('#testImage').remove();
}
//append to body
$('body').append(tempImg);
//Set an image url. I am using an image which I got from google.
tempImg[0].src ='http://aspo.org/wp-content/uploads/strips.jpg';

Điều này sẽ cung cấp cho bạn chiều cao tương ứng với chiều rộng bạn đặt thay vì chiều rộng ban đầu hoặc Không.

Bạn cũng có thể dùng:

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

Nicky De Maeyer hỏi sau một bức ảnh nền; Tôi chỉ cần lấy nó từ css và thay thế "url ()":

var div = $('#my-bg-div');
var url = div.css('background-image').replace(/^url\(\'?(.*)\'?\)$/, '$1');
var img = new Image();
img.src = url;
console.log('img:', img.width + 'x' + img.height); // zero, image not yet loaded
console.log('div:', div.width() + 'x' + div.height());
img.onload = function() {
  console.log('img:', img.width + 'x' + img.height, (img.width/div.width()));
}

Bạn có thể áp dụng thuộc tính xử lý onload khi trang tải trong js hoặc jquery như thế này: -

$(document).ready(function(){
   var width = img.clientWidth;
   var height = img.clientHeight;

 });

Đơn giản, bạn có thể kiểm tra như thế này.

  <script>
  (function($) {
        $(document).ready(function() {
            console.log("ready....");
            var i = 0;
            var img;
            for(i=1; i<13; i++) {
                img = new Image();
                img.src = 'img/' + i + '.jpg';
                console.log("name : " + img.src);
                img.onload = function() {
                    if(this.height > this.width) {
                        console.log(this.src + " : portrait");
                    }
                    else if(this.width > this.height) {
                        console.log(this.src + " : landscape");
                    }
                    else {
                        console.log(this.src + " : square");
                    }
                }
            }
        });
    }(jQuery));
  </script>

var img = document.getElementById("img_id");
alert( img.height + " ;; " + img .width + " ;; " + img .naturalHeight + " ;; " + img .clientHeight + " ;; " + img.offsetHeight + " ;; " + img.scrollHeight + " ;; " + img.clientWidth + " ;; " + img.offsetWidth + " ;; " + img.scrollWidth )
//But all invalid in Baidu browser  360 browser ...

điều quan trọng là phải xóa cài đặt được giải thích của trình duyệt khỏi div cha. Vì vậy, nếu bạn muốn chiều rộng và chiều cao hình ảnh thực, bạn chỉ có thể sử dụng

$('.right-sidebar').find('img').each(function(){
    $(this).removeAttr("width");
    $(this).removeAttr("height");
    $(this).imageResize();
});

Đây là một ví dụ Dự án TYPO3 từ tôi, nơi tôi cần các thuộc tính thực của hình ảnh để chia tỷ lệ với mối quan hệ đúng.

var imgSrc, imgW, imgH;
function myFunction(image){
    var img = new Image();
    img.src = image;
    img.onload = function() {   
        return {
            src:image,
            width:this.width,
            height:this.height};
        }
    return img;
}
var x = myFunction('http://www.google.com/intl/en_ALL/images/logo.gif');
    //Waiting for the image loaded. Otherwise, system returned 0 as both width and height.
x.addEventListener('load',function(){
    imgSrc = x.src;
    imgW = x.width;
    imgH = x.height;
});
x.addEventListener('load',function(){
    console.log(imgW+'x'+imgH);//276x110
});
console.log(imgW);//undefined.
console.log(imgH);//undefined.
console.log(imgSrc);//undefined.

Đây là phương pháp của tôi, hy vọng điều này hữu ích. :)

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 resloution image.Your image width=" + this.width + ",Heigh=" + 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]);
}

công việc này để xem trước và tải lên nhiều hình ảnh. nếu bạn phải chọn từng hình ảnh một. Sau đó sao chép và dán vào tất cả các chức năng hình ảnh xem trước và xác nhận !!!

Trước khi có được các thuộc tính của phần tử, trang tài liệu phải được tải:

window.onload=function(){
    console.log(img.offsetWidth,img.offsetHeight);
}

chỉ cần vượt qua đối tượng tệp img mà phần tử đầu vào thu được khi chúng ta chọn đúng tệp, nó sẽ cho chiều cao và chiều rộng của hình ảnh

function getNeturalHeightWidth(file) {
     let h, w;
     let reader = new FileReader();
      reader.onload = () => {
        let tmpImgNode = document.createElement("img");
        tmpImgNode.onload = function() {
          h = this.naturalHeight;
          w = this.naturalWidth;
        };
        tmpImgNode.src = reader.result;
      };
      reader.readAsDataURL(file);
    }
   return h, w;
}