Lấy chiều rộng và chiều cao thực của hình ảnh bằng JavaScript? (trong Safari / Chrome)

Tôi đang tạo một plugin jQuery.

Làm cách nào để có được chiều rộng và chiều cao hình ảnh thực với Javascript trong Safari?

Sau đây hoạt động với Firefox 3, IE7 và Opera 9:

var pic = $("img")

// need to remove these in of case img-element has set width and height
pic.removeAttr("width"); 
pic.removeAttr("height");

var pic_real_width = pic.width();
var pic_real_height = pic.height();

Nhưng trong các trình duyệt Webkit như giá trị Safari và Google Chrome là 0.

Các trình duyệt Webkit đặt thuộc tính chiều cao và chiều rộng sau khi hình ảnh được tải. Thay vì sử dụng thời gian chờ, tôi khuyên bạn nên sử dụng sự kiện tải hình ảnh. Đây là một ví dụ nhanh:

var img = $("img")[0]; // Get my img elem
var pic_real_width, pic_real_height;
$("<img/>") // Make in memory copy of image to avoid css issues
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width;   // Note: $(this).width() will not
        pic_real_height = this.height; // work for in memory images.
    });

Để tránh bất kỳ hiệu ứng nào CSS có thể có trên kích thước của hình ảnh, đoạn mã trên tạo một bản sao trong bộ nhớ của hình ảnh. Đây là một giải pháp rất thông minh được đề xuất bởi FDisk .

Bạn cũng có thể sử dụng các thuộc tính naturalHeightvà naturalWidthHTML5.

Sử dụng các thuộc tính naturalHeightvà naturalWidthtừ HTML5 .

Ví dụ:

var h = document.querySelector('img').naturalHeight;

Hoạt động trong IE9 +, Chrome, Firefox, Safari và Opera ( số liệu thống kê ).

function getOriginalWidthOfImg(img_element) {
    var t = new Image();
    t.src = (img_element.getAttribute ? img_element.getAttribute("src") : false) || img_element.src;
    return t.width;
}

Bạn không cần xóa kiểu khỏi các thuộc tính kích thước hình ảnh hoặc hình ảnh. Chỉ cần tạo một phần tử với javascript và lấy chiều rộng đối tượng được tạo.

Vấn đề gốc là các trình duyệt WebKit (Safari và Chrome) tải thông tin JavaScript và CSS song song. Do đó, JavaScript có thể thực thi trước khi các hiệu ứng kiểu dáng của CSS được tính toán, trả về câu trả lời sai. Trong jQuery, tôi đã thấy rằng giải pháp là đợi cho đến document. YetState == 'hoàn thành', .eg,

jQuery(document).ready(function(){
  if (jQuery.browser.safari && document.readyState != "complete"){
    //console.info('ready...');
    setTimeout( arguments.callee, 100 );
    return;
  } 
  ... (rest of function) 

Theo chiều rộng và chiều cao ... tùy thuộc vào những gì bạn đang làm, bạn có thể muốn offsetWidth và offsetHeight, bao gồm những thứ như đường viền và phần đệm.

Có rất nhiều cuộc thảo luận trong câu trả lời được chấp nhận về một vấn đề trong đó onloadsự kiện không kích hoạt nếu hình ảnh được tải từ bộ đệm WebKit.

Trong trường hợp của tôi, onloadkích hoạt các hình ảnh được lưu trong bộ nhớ cache, nhưng chiều cao và chiều rộng vẫn là 0. Một cách đơn giản đã setTimeoutgiải quyết vấn đề cho tôi:

$("img").one("load", function(){
    var img = this;
    setTimeout(function(){
        // do something based on img.width and/or img.height
    }, 0);
});

Tôi không thể nói lý do tại sao onloadsự kiện lại phát sinh ngay cả khi hình ảnh được tải từ bộ đệm (cải thiện jQuery 1.4 / 1.5?) - nhưng nếu bạn vẫn gặp phải sự cố này, có thể kết hợp câu trả lời của tôi và var src = img.src; img.src = ""; img.src = src;kỹ thuật sẽ công việc.

(Lưu ý rằng với mục đích của tôi, tôi không quan tâm đến các kích thước được xác định trước, trong các thuộc tính hoặc kiểu CSS của hình ảnh - nhưng bạn có thể muốn xóa chúng, theo câu trả lời của Xavi. Hoặc sao chép hình ảnh.)

điều này hiệu quả với tôi (safari 3.2), bằng cách bắn từ bên trong window.onloadsự kiện:

$(window).load(function() {
  var pic = $('img');

  pic.removeAttr("width"); 
  pic.removeAttr("height");

  alert( pic.width() );
  alert( pic.height() );
});

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

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

Những gì về image.naturalHeightvà image.naturalWidthtài sản?

Có vẻ hoạt động tốt trở lại khá nhiều phiên bản trong Chrome, Safari và Firefox, nhưng hoàn toàn không có trong IE8 hoặc thậm chí IE9.

Làm thế nào chúng ta có được kích thước thật mà không cần hình ảnh thật trong nháy mắt:

(function( $ ){
   $.fn.getDimensions=function(){
         alert("First example:This works only for HTML code without CSS width/height definition.");
         w=$(this, 'img')[0].width;
         h=$(this, 'img')[0].height;

         alert("This is a width/height on your monitor: " + $(this, 'img')[0].width+"/"+$(this, 'img')[0].height);

         //This is bad practice - it shows on your monitor
         $(this, 'img')[0].removeAttribute( "width" );
         $(this, 'img')[0].removeAttribute( "height" );
         alert("This is a bad effect of view after attributes removing, but we get right dimensions: "+  $(this, 'img')[0].width+"/"+$(this, 'img')[0].height);
         //I'am going to repare it
         $(this, 'img')[0].width=w;
         $(this, 'img')[0].height=h;
         //This is a good practice - it doesn't show on your monitor
         ku=$(this, 'img').clone(); //We will work with a clone
         ku.attr( "id","mnbv1lk87jhy0utrd" );//Markup clone for a final removing
         ku[0].removeAttribute( "width" );
         ku[0].removeAttribute( "height" );
         //Now we still get 0
         alert("There are still 0 before a clone appending to document: "+ $(ku)[0].width+"/"+$(ku)[0].height);
         //Hide a clone
         ku.css({"visibility" : "hidden",'position':'absolute','left':'-9999px'}); 
         //A clone appending
         $(document.body).append (ku[0]);
         alert("We get right dimensions: "+ $(ku)[0].width+"/"+$(ku)[0].height);
         //Remove a clone
         $("#mnbv1lk87jhy0utrd").remove();

         //But a next resolution is the best of all. It works in case of CSS definition of dimensions as well.
         alert("But if you want to read real dimensions for image with CSS class definition outside of img element, you can't do it with a clone of image. Clone method is working with CSS dimensions, a clone has dimensions as well as in CSS class. That's why you have to work with a new img element.");
         imgcopy=$('<img src="'+ $(this, 'img').attr('src') +'" />');//new object 
         imgcopy.attr( "id","mnbv1lk87jhy0aaa" );//Markup for a final removing
         imgcopy.css({"visibility" : "hidden",'position':'absolute','left':'-9999px'});//hide copy 
         $(document.body).append (imgcopy);//append to document 
         alert("We get right dimensions: "+ imgcopy.width()+"/"+imgcopy.height());
         $("#mnbv1lk87jhy0aaa").remove();


   }
})( jQuery );

$(document).ready(function(){

   $("img.toreaddimensions").click(function(){$(this).getDimensions();});
});

Nó hoạt động với <img class = "toreaddimensions" ...

Jquery có hai thuộc tính được gọi là NaturalWidth và NaturalHeight, bạn có thể sử dụng theo cách này.

$('.my-img')[0].naturalWidth 
$('.my-img')[0].naturalHeight

Trong đó my-img là tên lớp được sử dụng để chọn hình ảnh của tôi.

Như đã nêu trước đây, câu trả lời Xavi sẽ không hoạt động nếu hình ảnh nằm trong bộ đệm. Vấn đề phản ứng với bộ webkit không kích hoạt sự kiện tải trên các hình ảnh được lưu trong bộ nhớ cache, do đó, nếu độ rộng / chiều cao không được đặt rõ ràng trong thẻ img, cách duy nhất đáng tin cậy để có được hình ảnh là chờ window.loadsự kiện được kích hoạt.

Sự window.loadkiện sẽ luôn diễn ra , vì vậy thật an toàn khi truy cập chiều rộng / chiều cao và img sau đó mà không có bất kỳ mẹo nào.

$(window).load(function(){

   //these all work

   $('img#someId').css('width');
   $('img#someId').width();
   $('img#someId').get(0).style.width;
   $('img#someId').get(0).width; 

});

Nếu bạn cần lấy kích thước của hình ảnh được tải động có thể được lưu vào bộ đệm (đã tải trước đó), bạn có thể sử dụng phương thức Xavi cộng với chuỗi truy vấn để kích hoạt làm mới bộ đệm. Nhược điểm là nó sẽ gây ra một yêu cầu khác cho máy chủ, đối với một img đã được lưu trữ và nên đã có sẵn. Webkit ngu ngốc.

var pic_real_width   = 0,
    img_src_no_cache = $('img#someId').attr('src') + '?cache=' + Date.now();

$('<img/>').attr('src', img_src_no_cache).load(function(){

   pic_real_width = this.width;

});

ps: nếu bạn đã có QueryString img.src, bạn sẽ phải phân tích cú pháp và thêm tham số phụ để xóa bộ đệm.

Như Luke Smith nói, tải hình ảnh là một mớ hỗn độn . Nó không đáng tin cậy trên tất cả các trình duyệt. Thực tế này đã mang lại cho tôi nỗi đau lớn. Một hình ảnh được lưu trong bộ nhớ cache sẽ không kích hoạt sự kiện ở một số trình duyệt, vì vậy những người nói rằng "tải hình ảnh tốt hơn setTimeout" là sai.

Giải pháp của Luke Smith là ở đây.

Và có một cuộc thảo luận thú vị về cách xử lý mớ hỗn độn này trong jQuery 1.4.

Tôi đã thấy rằng việc đặt chiều rộng thành 0 là khá đáng tin cậy, sau đó đợi thuộc tính "hoàn thành" trở thành đúng và thuộc tính chiều rộng sẽ lớn hơn 0. Bạn cũng nên theo dõi các lỗi.

$("#myImg").one("load",function(){
  //do something, like getting image width/height
}).each(function(){
  if(this.complete) $(this).trigger("load");
});

Từ nhận xét của Chris: http://api.jquery.com/load-event/

Hoàn cảnh của tôi có lẽ hơi khác một chút. Tôi đang tự động thay đổi src của hình ảnh thông qua javascript và cần thiết để đảm bảo rằng hình ảnh mới có kích thước tương ứng để phù hợp với một thùng chứa cố định (trong bộ sưu tập ảnh). Ban đầu tôi chỉ xóa các thuộc tính chiều rộng và chiều cao của hình ảnh sau khi được tải (thông qua sự kiện tải hình ảnh) và đặt lại các thuộc tính này sau khi tính toán kích thước ưa thích. Tuy nhiên, điều đó không hoạt động trong Safari và có thể cả IE (Tôi chưa kiểm tra kỹ về IE, nhưng hình ảnh thậm chí không hiển thị, vì vậy ...).

Dù sao, Safari vẫn giữ kích thước của hình ảnh trước đó để kích thước luôn luôn là một hình ảnh phía sau. Tôi giả định rằng điều này có liên quan đến bộ nhớ cache. Vì vậy, giải pháp đơn giản nhất là chỉ sao chép hình ảnh và thêm nó vào DOM (điều quan trọng là nó phải được thêm vào DOM, lấy và có chiều cao). Cung cấp cho hình ảnh một giá trị hiển thị của ẩn (không sử dụng không hiển thị vì nó sẽ không hoạt động). Sau khi bạn nhận được kích thước loại bỏ bản sao.

Đây là mã của tôi bằng jQuery:

// Hack for Safari and others
// clone the image and add it to the DOM
// to get the actual width and height
// of the newly loaded image

var cloned, 
    o_width, 
    o_height, 
    src = 'my_image.jpg', 
    img = [some existing image object];

$(img)
.load(function()
{
    $(this).removeAttr('height').removeAttr('width');
    cloned = $(this).clone().css({visibility:'hidden'});
    $('body').append(cloned);
    o_width = cloned.get(0).width; // I prefer to use native javascript for this
    o_height = cloned.get(0).height; // I prefer to use native javascript for this
    cloned.remove();
    $(this).attr({width:o_width, height:o_height});
})
.attr(src:src);

Giải pháp này hoạt động trong mọi trường hợp.

Hiện tại đã có plugin jQuery event.special.load, để xử lý các trường hợp sự kiện tải trên ảnh được lưu trong bộ nhớ cache không kích hoạt: http://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js

Gần đây tôi cần tìm chiều rộng và chiều cao để đặt kích thước mặc định của biểu đồ .dialog. Giải pháp tôi sử dụng là:

 graph= $('<img/>', {"src":'mySRC', id:'graph-img'});
    graph.bind('load', function (){
        wid = graph.attr('width');
        hei = graph.attr('height');

        graph.dialog({ autoOpen: false, title: 'MyGraphTitle', height:hei, width:wid })
    })

Đối với tôi điều này hoạt động trong FF3, Opera 10, IE 8,7,6

PS Bạn có thể tìm thấy thêm một số giải pháp tìm kiếm bên trong một số plugin như LightBox hoặc ColorBox

Để thêm vào câu trả lời của Xavi, gitgub của David Ailen David Desandro cung cấp một chức năng gọi là hình ảnhLoaded () hoạt động theo cùng các nguyên tắc và giải quyết vấn đề về một số hình ảnh được lưu trong bộ nhớ cache của trình duyệt không kích hoạt sự kiện .load () (với bản gốc thông minh_src -> data_uri -> chuyển đổi gốc_src).

Nó được sử dụng rộng rãi và được cập nhật thường xuyên, điều này góp phần làm cho nó trở thành giải pháp mạnh mẽ nhất cho vấn đề này, IMO.

Điều này hoạt động cho cả hình ảnh được lưu trữ và lưu trữ động.

function LoadImage(imgSrc, callback){
  var image = new Image();
  image.src = imgSrc;
  if (image.complete) {
    callback(image);
    image.onload=function(){};
  } else {
    image.onload = function() {
      callback(image);
      // clear onLoad, IE behaves erratically with animated gifs otherwise
      image.onload=function(){};
    }
    image.onerror = function() {
        alert("Could not load image.");
    }
  }
}

Để sử dụng tập lệnh này:

function AlertImageSize(image) {
  alert("Image size: " + image.width + "x" + image.height);
}
LoadImage("http://example.org/image.png", AlertImageSize);

Bản trình diễn: http://jsfiddle.net/9543z/2/

Tôi đã thực hiện một số chức năng tiện ích giải pháp, sử dụng plugin jquery hình ảnh được tải: https://github.com/desandro/imagesloaded

            function waitForImageSize(src, func, ctx){
                if(!ctx)ctx = window;
                var img = new Image();
                img.src = src;
                $(img).imagesLoaded($.proxy(function(){
                    var w = this.img.innerWidth||this.img.naturalWidth;
                    var h = this.img.innerHeight||this.img.naturalHeight;
                    this.func.call(this.ctx, w, h, this.img);
                },{img: img, func: func, ctx: ctx}));
            },

Bạn có thể sử dụng điều này bằng cách chuyển url, chức năng và bối cảnh của nó. Chức năng được thực hiện sau khi hình ảnh được tải và trả về hình ảnh được tạo, chiều rộng và chiều cao của nó.

waitForImageSize("image.png", function(w,h){alert(w+","+h)},this)

Nếu hình ảnh đã được sử dụng, bạn nên sholud:

1. đặt mô phỏng hình ảnh thành ban đầu

   image.css ('chiều rộng', 'ban đầu'); image.css ('chiều cao', 'ban đầu');

2. có được kích thước

   var gốcWidth = $ (this). thong (); var gốcHeight = $ (này) .height ();

Bạn có thể sử dụng các thuộc tính NaturalWidth và NaturalHeight của thành phần hình ảnh HTML. (Đây là thông tin thêm ).

Bạn sẽ sử dụng nó như thế này:

//you need a reference to the DOM element, not a jQuery object. It would be better if you can use document.getElementByTagsName or ID or any other native method
var pic = $("img")[0];
var pic_real_width = pic.naturalWidth;
var pic_real_height = pic.naturalHeight;

Có vẻ như điều này hoạt động trong tất cả các trình duyệt ngoại trừ trên IE từ phiên bản 8 trở xuống.

Tôi đã kiểm tra câu trả lời của Dio và nó hoạt động rất tốt cho tôi.

$('#image').fadeIn(10,function () {var tmpW = $(this).width(); var tmpH = $(this).height(); });

Hãy chắc chắn rằng bạn gọi tất cả các chức năng của bạn. xử lý với kích thước hình ảnh trong chức năng gọi lại của fadeIn ().

Cảm ơn vì điều đó.

Tôi sử dụng cách tiếp cận khác nhau, chỉ cần thực hiện cuộc gọi Ajax đến máy chủ để lấy kích thước hình ảnh khi đối tượng hình ảnh được sử dụng.

//make json call to server to get image size
$.getJSON("http://server/getimagesize.php",
{"src":url},
SetImageWidth
);

//callback function
function SetImageWidth(data) {

    var wrap = $("div#image_gallery #image_wrap");

    //remove height
     wrap.find("img").removeAttr('height');
    //remove height
     wrap.find("img").removeAttr('width');

    //set image width
    if (data.width > 635) {
        wrap.find("img").width(635);
    }
    else {
         wrap.find("img").width(data.width);
    }
}

và tất nhiên mã phía máy chủ:

<?php

$image_width = 0;
$image_height = 0;

if (isset ($_REQUEST['src']) && is_file($_SERVER['DOCUMENT_ROOT'] . $_REQUEST['src'])) {

    $imageinfo = getimagesize($_SERVER['DOCUMENT_ROOT'].$_REQUEST['src']);
    if ($imageinfo) {
       $image_width=  $imageinfo[0];
       $image_height= $imageinfo[1];
    }
}

$arr = array ('width'=>$image_width,'height'=>$image_height);

echo json_encode($arr);

?>

Điều này hoạt động trên trình duyệt chéo

var img = new Image();
$(img).bind('load error', function(e)
{
    $.data(img, 'dimensions', { 'width': img.width, 'height': img.height });                    
});
img.src = imgs[i];              

có được kích thước bằng cách sử dụng

$(this).data('dimensions').width;
$(this).data('dimensions').height;

Chúc mừng!

Một gợi ý khác là sử dụng plugin PicturesLoaded .

$("img").imagesLoaded(function(){
alert( $(this).width() );
alert( $(this).height() );
});

$(document).ready(function(){
                            var image = $("#fix_img");
                            var w = image.width();
                            var h = image.height();
                            var mr = 274/200;
                            var ir = w/h
                            if(ir > mr){
                                image.height(200);
                                image.width(200*ir);
                            } else{
                                image.width(274);
                                image.height(274/ir);
                            }
                        }); 

// Mã này giúp hiển thị hình ảnh với độ mờ 200 * 274

Đây là một giải pháp trình duyệt chéo kích hoạt sự kiện khi các hình ảnh đã chọn của bạn được tải: http://desandro.github.io/imagesloaded/ bạn có thể tra cứu chiều cao và chiều rộng trong hàm PicturesLoaded ().

Tình cờ gặp chủ đề này khi cố gắng tìm câu trả lời cho câu hỏi của riêng tôi. Tôi đã cố gắng để có được chiều rộng / chiều cao của hình ảnh trong một chức năng SAU trình tải và tiếp tục đến 0. Tôi cảm thấy như đây có thể là thứ bạn đang tìm kiếm, mặc dù, nó hoạt động với tôi:

tempObject.image = $('<img />').attr({ 'src':"images/prod-" + tempObject.id + ".png", load:preloader });
xmlProjectInfo.push(tempObject);

function preloader() {
    imagesLoaded++;
    if (imagesLoaded >= itemsToLoad) { //itemsToLoad gets set elsewhere in code
        DetachEvent(this, 'load', preloader); //function that removes event listener
        drawItems();
    }   
}

function drawItems() {
    for(var i = 1; i <= xmlProjectInfo.length; i++)
        alert(xmlProjectInfo[i - 1].image[0].width);
}

Kiểm tra kho lưu trữ này trong github!

Ví dụ tuyệt vời để kiểm tra Chiều rộng và Chiều cao bằng Javascript

https://github.com/AzizAK/ImageRealSize

--- Đã chỉnh sửa được yêu cầu từ một số ý kiến ​​..

Mã Javascript:

 function CheckImageSize(){
var image = document.getElementById("Image").files[0];
           createReader(image, function (w, h) {

                alert("Width is: " + w + " And Height is: "+h);
});            
}


  function  createReader(file, whenReady) {
        var reader = new FileReader;
        reader.onload = function (evt) {
            var image = new Image();
            image.onload = function (evt) {
                var width = this.width;
                var height = this.height;
                if (whenReady) whenReady(width, height);
            };
            image.src = evt.target.result;
        };
        reader.readAsDataURL(file);
    }

và mã HTML:

<html>
<head>
<title>Image Real Size</title>
<script src="ImageSize.js"></script>
</head>
<body>
<input type="file" id="Image"/>
<input type="button" value="Find the dimensions" onclick="CheckImageSize()"/>
</body>
<html>

Đối với các chức năng mà bạn không muốn thay đổi vị trí hoặc hình ảnh ban đầu.

$(this).clone().removeAttr("width").attr("width");
$(this).clone().removeAttr("height").attr("height);