รับความกว้างและความสูงที่แท้จริงของรูปภาพด้วย JavaScript หรือไม่ (ใน Safari / Chrome)

ฉันกำลังสร้างปลั๊กอิน jQuery

ฉันจะได้รับความกว้างและความสูงของภาพจริงด้วย Javascript ใน Safari ได้อย่างไร

การทำงานต่อไปนี้กับ Firefox 3, IE7 และ 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();

แต่ในเบราว์เซอร์ Webkit เช่นค่า Safari และ Google Chrome คือ 0

เบราว์เซอร์ Webkit ตั้งค่าคุณสมบัติความสูงและความกว้างหลังจากโหลดภาพแล้ว แทนที่จะใช้การหมดเวลาฉันขอแนะนำให้ใช้เหตุการณ์ onload ของภาพ นี่คือตัวอย่างรวดเร็ว:

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.
    });

เพื่อหลีกเลี่ยงเอฟเฟกต์ CSS ใด ๆ ที่อาจมีต่อขนาดของรูปภาพโค้ดด้านบนจะสร้างสำเนาหน่วยความจำของรูปภาพ นี่เป็นทางออกที่ฉลาดมากที่FDiskแนะนำ

คุณยังสามารถใช้แอตทริบิวต์naturalHeightและnaturalWidthHTML5

ใช้naturalHeightและnaturalWidthแอตทริบิวต์จากHTML5

ตัวอย่างเช่น:

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

ใช้งานได้ใน IE9 +, Chrome, Firefox, Safari และ Opera ( สถิติ )

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

คุณไม่จำเป็นต้องลบสไตล์ออกจากภาพหรือคุณสมบัติขนาดภาพ เพียงสร้างองค์ประกอบด้วย javascript และรับความกว้างของวัตถุที่สร้างขึ้น

ปัญหาหลักคือเบราว์เซอร์ WebKit (Safari และ Chrome) โหลดข้อมูล JavaScript และ CSS พร้อมกัน ดังนั้น JavaScript อาจดำเนินการก่อนที่เอฟเฟกต์สไตล์ของ CSS จะได้รับการคำนวณกลับคำตอบที่ผิด ใน jQuery ฉันพบว่าวิธีแก้ปัญหาคือรอจนกระทั่ง document.readyState == 'เสร็จสมบูรณ์', .eg

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

เท่าที่ความกว้างและความสูงไป ... ขึ้นอยู่กับสิ่งที่คุณทำคุณอาจต้องการ offsetWidth และ offsetHeight ซึ่งรวมถึงสิ่งต่าง ๆ เช่นเส้นขอบและช่องว่างภายใน

มีการอภิปรายจำนวนมากในคำตอบที่ได้รับการยอมรับเกี่ยวกับปัญหาที่onloadเหตุการณ์ไม่เริ่มทำงานหากภาพถูกโหลดจากแคช WebKit

ในกรณีของฉันonloadไฟไหม้สำหรับภาพที่เก็บไว้ แต่ความสูงและความกว้างยังคงเป็น 0 ง่ายsetTimeoutแก้ไขปัญหาสำหรับฉัน:

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

ฉันไม่สามารถพูดได้ว่าเหตุใดonloadเหตุการณ์จึงเริ่มทำงานแม้ว่าภาพจะโหลดจากแคช (ปรับปรุง jQuery 1.4 / 1.5?) - แต่ถ้าคุณยังประสบปัญหานี้อยู่บางทีคำตอบของฉันและvar src = img.src; img.src = ""; img.src = src;เทคนิคอาจรวมกันงาน.

(โปรดทราบว่าเพื่อจุดประสงค์ของฉันฉันไม่ได้กังวลเกี่ยวกับขนาดที่กำหนดไว้ล่วงหน้าไม่ว่าจะเป็นในคุณลักษณะของรูปภาพหรือรูปแบบ CSS - แต่คุณอาจต้องการลบออกตามคำตอบของ Xavi หรือโคลนภาพ)

ใช้งานได้สำหรับฉัน (ซาฟารี 3.2) โดยการยิงจากภายในwindow.onloadเหตุการณ์:

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

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

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

คุณสามารถรับภาพโดยทางโปรแกรมและตรวจสอบขนาดโดยใช้ Javascript โดยไม่ต้องยุ่งกับ 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';

สิ่งที่เกี่ยวกับimage.naturalHeightและimage.naturalWidthคุณสมบัติ?

ดูเหมือนว่าจะทำงานได้ดีในบางรุ่นใน Chrome, Safari และ Firefox แต่ไม่ทั้งหมดใน IE8 หรือแม้แต่ IE9

วิธีที่เราได้มิติที่แท้จริงโดยไม่ต้องมีภาพกะพริบจริง:

(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();});
});

ใช้งานได้กับ <img class = "toreaddimensions" ...

Jquery มีคุณสมบัติสองอย่างที่เรียกว่า naturalWidth และ naturalHeight คุณสามารถใช้วิธีนี้ได้

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

ตำแหน่งของฉัน-img เป็นชื่อคลาสที่ใช้เพื่อเลือกภาพของฉัน

ตามที่ระบุไว้ก่อนหน้านี้คำตอบ Xaviจะไม่ทำงานหากรูปภาพอยู่ในแคช ปัญหาที่จะตอบสนอง WebKit ไม่ยิงเหตุการณ์โหลดภาพแคชดังนั้นหากความกว้าง / ความสูง attrs มีการกำหนดอย่างชัดเจนไม่มีในแท็ก img วิธีที่มีความน่าเชื่อถือเพียงเพื่อให้ได้ภาพที่จะรอให้window.loadเหตุการณ์ที่จะถูกยิง

window.loadเหตุการณ์จะยิงเสมอดังนั้นจึงปลอดภัยในการเข้าถึงกว้าง / สูงและ img หลังจากที่ว่าไม่มีเคล็ดลับใด ๆ

$(window).load(function(){

   //these all work

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

});

หากคุณต้องการขนาดของภาพที่โหลดแบบไดนามิกที่อาจได้รับแคช (โหลดก่อนหน้านี้) คุณสามารถใช้วิธี Xavi บวกกับสตริงแบบสอบถามเพื่อเรียกแคชรีเฟรช ข้อเสียคือมันจะทำให้เกิดการร้องขออื่นไปยังเซิร์ฟเวอร์สำหรับ img ที่แคชไว้แล้วและควรจะมีอยู่แล้ว Webkit โง่

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: หากคุณมี QueryString img.srcอยู่แล้วคุณจะต้องแยกวิเคราะห์และเพิ่มพารามิเตอร์พิเศษเพื่อล้างแคช

ขณะที่ลุคสมิ ธ กล่าวว่าโหลดภาพเป็นระเบียบ มันไม่น่าเชื่อถือในทุกเบราว์เซอร์ ความจริงข้อนี้ทำให้ฉันเจ็บปวดอย่างมาก รูปภาพแคชจะไม่เริ่มการทำงานของเหตุการณ์ในบางเบราว์เซอร์ดังนั้นผู้ที่กล่าวว่า "โหลดรูปภาพดีกว่า setTimeout" ผิด

วิธีแก้ปัญหาของลุคสมิ ธ อยู่ที่นี่

และมีการอภิปรายที่น่าสนใจเกี่ยวกับวิธีจัดการระเบียบนี้ใน jQuery 1.4

ฉันพบว่ามันค่อนข้างน่าเชื่อถือในการตั้งค่าความกว้างเป็น 0 จากนั้นรอให้คุณสมบัติ "สมบูรณ์" เป็นจริงและคุณสมบัติความกว้างมีค่ามากกว่าศูนย์ คุณควรระวังข้อผิดพลาดด้วย

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

จากความคิดเห็นของ Chris: http://api.jquery.com/load-event/

สถานการณ์ของฉันอาจแตกต่างกันเล็กน้อย ฉันกำลังเปลี่ยน src ของรูปภาพแบบไดนามิกผ่าน javascript และจำเป็นเพื่อให้แน่ใจว่าภาพใหม่มีขนาดตามสัดส่วนเพื่อให้พอดีกับคอนเทนเนอร์คงที่ (ในแกลเลอรีภาพถ่าย) ตอนแรกฉันเพิ่งลบคุณลักษณะความกว้างและความสูงของภาพหลังจากที่โหลด (ผ่านเหตุการณ์การโหลดของภาพ) และรีเซ็ตเหล่านี้หลังจากคำนวณขนาดที่ต้องการ อย่างไรก็ตามนั่นไม่ได้ผลใน Safari และอาจเป็นไปได้ว่า IE (ฉันไม่ได้ทดสอบอย่างละเอียดใน IE แต่ภาพไม่แสดงดังนั้น ... )

อย่างไรก็ตาม Safari ยังคงขนาดของภาพก่อนหน้าดังนั้นขนาดจะเป็นภาพเดียวเสมอ ฉันคิดว่านี่เป็นเรื่องเกี่ยวกับแคช ดังนั้นวิธีที่ง่ายที่สุดคือการโคลนภาพและเพิ่มเข้าไปใน DOM (มันเป็นสิ่งสำคัญที่จะต้องเพิ่มเข้าไปใน DOM เพื่อรับด้วยและความสูง) ให้ค่าการมองเห็นของภาพที่ซ่อนอยู่ (อย่าใช้การแสดงผลใด ๆ เพราะมันจะไม่ทำงาน) หลังจากที่คุณได้รับมิติลบโคลน

นี่คือรหัสของฉันโดยใช้ 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);

วิธีนี้ใช้ได้กับทุกกรณี

ขณะนี้มีปลั๊กอิน jQuery event.special.loadเพื่อจัดการกับกรณีที่เหตุการณ์โหลดบนรูปภาพแคชไม่ทำงาน: http://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js

เมื่อเร็ว ๆ นี้ฉันต้องการค้นหาความกว้างและความสูงสำหรับการตั้งค่าขนาดเริ่มต้นของ. diog ที่แทนกราฟ โซลูชันที่ฉันใช้คือ:

 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 })
    })

สำหรับฉันมันใช้งานได้ใน FF3, Opera 10, IE 8,7,6

ป.ล. คุณอาจพบวิธีแก้ไขเพิ่มเติมที่มองเข้าไปในปลั๊กอินบางตัวเช่น LightBox หรือ ColorBox

เพื่อเพิ่มคำตอบของ Xavi, gitgub ของPaul Irish gitgub ของ David Desandro นำเสนอฟังก์ชั่นที่เรียกว่า imagesLoaded ()ที่ทำงานบนหลักการเดียวกันและแก้ไขปัญหาของภาพแคชของเบราว์เซอร์บางตัวที่ไม่ใช้เหตุการณ์. load () ที่ชาญฉลาด data_uri -> การสลับ original_src)

มันถูกใช้กันอย่างแพร่หลายและปรับปรุงอย่างสม่ำเสมอซึ่งก่อให้เกิดเป็นโซลูชั่นที่แข็งแกร่งที่สุดในการแก้ไขปัญหา IMO

ใช้งานได้กับรูปภาพที่แคชและโหลดแบบไดนามิก

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.");
    }
  }
}

วิธีใช้สคริปต์นี้:

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

การสาธิต: http://jsfiddle.net/9543z/2/

ฉันได้ทำฟังก์ชั่นยูทิลิตี้การแก้ปัญหาโดยใช้ปลั๊กอิน jQuery imagesLoaded: 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}));
            },

คุณสามารถใช้สิ่งนี้ได้โดยผ่าน url ฟังก์ชั่นและบริบท ฟังก์ชั่นจะทำงานหลังจากโหลดภาพแล้วคืนภาพที่สร้างขึ้นความกว้างและความสูง

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

หากภาพนั้นถูกใช้ไปแล้วคุณ sholud:

1. ตั้งค่าขนาดภาพเป็นเริ่มต้น

   image.css ('ความกว้าง', 'เริ่มต้น'); image.css ('ความสูง', 'เริ่มต้น');

2. รับมิติ

   var originalWidth = $ (นี่) .width (); var originalHeight = $ (นี้) .height ();

คุณสามารถใช้คุณสมบัติ naturalWidth และ naturalHeight ขององค์ประกอบภาพ HTML (นี่คือข้อมูลเพิ่มเติม )

คุณจะใช้มันแบบนี้:

//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;

ดูเหมือนว่ามันจะทำงานได้ในทุกเบราว์เซอร์ยกเว้นใน IE จากรุ่น 8 ขึ้นไป

ฉันตรวจสอบคำตอบของ Dio และใช้งานได้ดีสำหรับฉัน

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

ตรวจสอบให้แน่ใจว่าคุณเรียกใช้ฟังก์ชั่นทั้งหมดของคุณด้วย จัดการกับขนาดภาพในฟังก์ชั่นการเรียกคืนของ fadeIn ()

ขอบคุณสำหรับสิ่งนี้.

ฉันใช้วิธีการที่แตกต่างกันเพียงทำการโทร Ajax ไปยังเซิร์ฟเวอร์เพื่อให้ได้ขนาดภาพเมื่อวัตถุรูปภาพถูกใช้งาน

//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);
    }
}

และรหัสฝั่งเซิร์ฟเวอร์แน่นอน:

<?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);

?>

มันใช้งานข้ามเบราว์เซอร์

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

รับมิติโดยใช้

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

ไชโย!

ข้อเสนอแนะก็คือการใช้ปลั๊กอิน imagesLoaded

$("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);
                            }
                        }); 

// รหัสนี้ช่วยในการแสดงภาพที่มีมิติ 200 * 274

ต่อไปนี้เป็นโซลูชันเบราว์เซอร์ข้ามที่ก่อให้เกิดเหตุการณ์เมื่อโหลดรูปภาพที่คุณเลือก: http://desandro.github.io/imagesloaded/คุณสามารถค้นหาความสูงและความกว้างภายในฟังก์ชั่น imagesLoaded ()

สะดุดกับหัวข้อนี้พยายามค้นหาคำตอบสำหรับคำถามของฉันเอง ฉันพยายามรับความกว้าง / ความสูงของภาพในฟังก์ชั่นหลังจากโหลดแล้วและยังคงมาพร้อมกับ 0 ฉันรู้สึกว่านี่อาจเป็นสิ่งที่คุณกำลังมองหา แต่มันเหมาะกับฉัน:

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);
}

ลองใช้พื้นที่เก็บข้อมูลนี้ใน GitHub!

ตัวอย่างที่ดีในการตรวจสอบความกว้างและความสูงโดยใช้ Javascript

https://github.com/AzizAK/ImageRealSize

--- ขอแก้ไขจากความคิดเห็นบางส่วน ..

รหัส 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);
    }

และรหัส 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>

สำหรับฟังก์ชั่นที่คุณไม่ต้องการเปลี่ยนตำแหน่งหรือภาพต้นฉบับ

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