JavaScript: Nhận kích thước hình ảnh

95

Tôi chỉ có một URL đến một hình ảnh. Tôi cần xác định chiều cao và chiều rộng của hình ảnh này chỉ bằng JavaScript. Hình ảnh không thể hiển thị cho người dùng trên trang. Làm thế nào tôi có thể nhận được kích thước của nó?

javascript html image

— JQueeeer
nguồn

2

stackoverflow.com/questions/106828/javascript-get-image-height

— stecb

1

thực sự câu trả lời này là câu trả lời duy nhất thực sự chính xác, vì bạn phải đợi cho đến khi hình ảnh được tải.

— Shadow Wizard là Ear For You

196

var img = new Image();

img.onload = function(){
  var height = img.height;
  var width = img.width;

  // code here to use the dimensions
}

img.src = url;

— Shumii
nguồn

1

Trừ khi bạn cần lấy các kích thước một cách đồng bộ. Trong trường hợp đó, bạn chỉ cần chèn hình ảnh vào tài liệu (sử dụng một vị trí tuyệt đối ở đâu đó bên ngoài khung nhìn) - khi đó các kích thước có sẵn ngay sau khi gọi document.appendChild ().

— JustAndrei

1

Tại sao onloadtrước khi đặt url của hình ảnh?

— Ajay Bò tót

23

@AjayGaur vì onloadlà trình lắng nghe sẽ được gọi là không đồng bộ nếu hình ảnh được tải đúng cách. Nếu bạn đặt trình nghe sau khi đặt url, hình ảnh có thể tải ngay trước khi mã đạt đến việc thiết lập chính tải lên, dẫn đến trình nghe không bao giờ được gọi. Sử dụng phép loại suy, nếu bạn đang tự phục vụ một ly nước, trước tiên bạn rót nước và tiếp theo bạn đặt ly cho đầy? Hay bạn đặt ly đầu tiên và sau đó bạn đổ nước vào?

— biomorgoth

2

img.naturalWidth và img.naturalHeight là câu trả lời đúng

— Kamlesh

Cảm ơn bạn @Kamlesh Tôi cần kích thước tự nhiên.

— jahooma

43

Tạo một cái mới Image

var img = new Image();

Đặt src

img.src = your_src

Nhận widthvàheight

//img.width
//img.height

— nc3b
nguồn

17

Tôi tiếp tục nhận được 0 cho chiều rộng và chiều cao, sử dụng mã chính xác này.

— Adam Casey

11

Có vẻ như hình ảnh phải tải, điều này có ý nghĩa.

— Adam Casey

3

thông tin bổ sung - mặc dù điều này làm việc cho tôi lần đầu tiên nó không liên tục. Tôi nghĩ vấn đề là do hình ảnh chưa được tải xuống. Tôi đã sửa bằng cách chạy mã sử dụng thứ nguyên trong trình xử lý sự kiện onload như sau: img.onload = function () {};

— Shumii 13/1213

3

Mã này hoạt động, miễn là hình ảnh nằm trong bộ nhớ cache của trình duyệt. Khi bộ nhớ cache không hợp lệ hoặc bị xóa. Nó sẽ không hoạt động. Vì vậy, không thực sự đáng tin cậy.

— bharatesh

2

Điều đó không hoạt động, vì hình ảnh chưa được tải - quá trình tải hình ảnh được thực hiện không đồng bộ, vì vậy bạn phải đợi sự kiện tải.

— user1702401 17/04/17

5

Thao tác này sử dụng chức năng và đợi nó hoàn thành.

http://jsfiddle.net/SN2t6/118/

function getMeta(url){
    var r = $.Deferred();

  $('<img/>').attr('src', url).load(function(){
     var s = {w:this.width, h:this.height};
     r.resolve(s)
  });
  return r;
}

getMeta("http://www.google.hr/images/srpr/logo3w.png").done(function(test){
    alert(test.w + ' ' + test.h);
});

— DavidDunham
nguồn

1

Tại sao chức năng có thể tái sử dụng này với người trì hoãn lại bị từ chối ?!

— DavidDunham

'chỉ sử dụng JavaScript' và đây là jQuery, tôi đoán

— Apolo

Bạn nhận được sự ủng hộ từ tôi mặc dù nó đang sử dụng jQuerry. Cách tiếp cận là vấn đề.

— krankuba

2

tự nhiên Chiều rộng và chiều cao tự nhiên

var img = document.createElement("img");
img.onload = function (event)
{
    console.log("natural:", img.naturalWidth, img.naturalHeight);
    console.log("width,height:", img.width, img.height);
    console.log("offsetW,offsetH:", img.offsetWidth, img.offsetHeight);
}
img.src = "image.jpg";
document.body.appendChild(img);

// css for tests
img { width:50%;height:50%; }

— Cay đắng màu xanh
nguồn

1

nếu bạn có tệp hình ảnh từ biểu mẫu đầu vào của mình. bạn có thể sử dụng như thế này

let images = new Image();
images.onload = () => {
 console.log("Image Size", images.width, images.height)
}
images.onerror = () => result(true);

let fileReader = new FileReader();
fileReader.onload = () => images.src = fileReader.result;
fileReader.onerror = () => result(false);
if (fileTarget) {
   fileReader.readAsDataURL(fileTarget);
}

— Raka Adi Nugroho
nguồn

0

Câu hỏi tương tự được hỏi và trả lời bằng JQuery tại đây:

Nhận chiều cao chiều rộng của hình ảnh từ xa từ url

function getMeta(url){
  $("<img/>").attr("src", url).load(function(){
     s = {w:this.width, h:this.height};
     alert(s.w+' '+s.h);      
  }); 
}

getMeta("http://page.com/img.jpg");

— Luke Knepper
nguồn

0

Nhận kích thước hình ảnh với jQuery

function getMeta(url){
    $("<img/>",{
        load : function(){
            alert(this.width+' '+this.height);
        },
        src  : url
    });
}

Nhận kích thước hình ảnh với JavaScript

function getMeta(url){   
    var img = new Image();
    img.onload = function(){
        alert( this.width+' '+ this.height );
    };
    img.src = url;
}

Nhận kích thước hình ảnh với JavaScript (trình duyệt hiện đại, IE9 +)

function getMeta(url){   
    var img = new Image();
    img.addEventListener("load", function(){
        alert( this.naturalWidth +' '+ this.naturalHeight );
    });
    img.src = url;
}

Sử dụng ở trên đơn giản như: getMeta (" http://example.com/img.jpg ");

https://developer.mozilla.org/en/docs/Web/API/HTMLImageElement

— Sunny Mahajan
nguồn

-3

Mã sau thêm chiều cao và chiều rộng thuộc tính hình ảnh cho mỗi hình ảnh trên trang.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function addImgAttributes()
{
    for( i=0; i < document.images.length; i++)
    { 
        width = document.images[i].width;
        height = document.images[i].height;
        window.document.images[i].setAttribute("width",width);
        window.document.images[i].setAttribute("height",height);

    }
}
</script>
</head>
<body onload="addImgAttributes();">
<img src="2_01.jpg"/>
<img src="2_01.jpg"/>
</body>
</html>

— Testere
nguồn

13

Câu hỏi là về việc nhận kích thước hình ảnh mà không hiển thị hình ảnh cho người dùng. Đặt thuộc tính chiều rộng và chiều cao của hình ảnh sau khi hình ảnh được hiển thị hoàn toàn không có ý nghĩa.

— Yaroslav Stavnichiy