الحصول على عرض وارتفاع الصورة مع جافا سكريبت ؟ (في سفاري/كروم)

StackOverflow https://stackoverflow.com/questions/318630

سؤال

أنا إنشاء البرنامج المساعد مسج.

كيف يمكنني الحصول على صورة حقيقية العرض والارتفاع مع جافا سكريبت في سفاري ؟

التالية تعمل مع فايرفوكس 3 ، IE7 و أوبرا 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();

لكن في المتصفحات بكت مثل سفاري و جوجل كروم القيم 0.

هل كانت مفيدة؟

المحلول

والمتصفحات بكت تعيين الارتفاع والممتلكات العرض بعد تحميل الصورة. بدلا من استخدام مهلة، أنصح باستخدام الحدث 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 وnaturalWidth سمات HTML5.

نصائح أخرى

استخدم في naturalHeight وسمات naturalWidth من HTML5 .

وعلى سبيل المثال: 

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

الأشغال في IE9 +، والكروم، فايرفوكس، وسفاري وأوبرا ( احصائيات ). 


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

وأنت لا تحتاج إلى إزالة النمط من صورة أو صورة أبعاد الصفات. مجرد خلق عنصر مع جافا سكريبت والحصول على عرض كائن تم إنشاؤه.

والمشكلة الأساسية تكمن في أن المتصفحات بكت (سفاري وكروم) تحميل جافا سكريبت والمعلومات CSS بشكل متواز. وبالتالي، قد جافا سكريبت تنفيذ قبل تم حساب الآثار التصميم من CSS، والعودة إجابة خاطئة. في مسج، لقد وجدت أن الحل هو الانتظار حتى document.readyState == 'الكامل'، .e.g. 

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 إذا تم تحميل صورة من ذاكرة التخزين المؤقت بكت.

في حالتي، وحرائق onload للصور المخزنة مؤقتا، ولكن الطول والعرض لا تزال 0. setTimeout بسيطة حل المشكلة بالنسبة لي: 

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

لا أستطيع أن أتكلم لماذا هذا الحدث onload واطلاق النار حتى عندما يتم تحميل الصورة من ذاكرة التخزين المؤقت (تحسين مسج 1.4 / 1.5؟) - ولكن إذا كنت لا تزال تواجه هذه المشكلة، وربما مزيج من جوابي وتقنية var src = img.src; img.src = ""; img.src = src; ستعمل.

و(لاحظ أنه لأغراض بلدي، وأنا لست قلقا بشأن أبعاد محددة مسبقا، إما في سمات الصورة أو الأنماط CSS - ولكنك قد تحتاج إلى إزالة تلك، وفقا الجواب تشابي أو استنساخ صورة.)

وهذا يعمل بالنسبة لي (سفاري 3.2)، بإطلاق النار من داخل الحدث window.onload: 

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

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

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

ويمكنك برمجيا الحصول على صورة ومراجعة أبعاد باستخدام جافا سكريبت دون الحاجة إلى فوضى مع 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 خصائص؟

ويبدو أن تعمل بشكل جيد الوراء قليل الإصدارات في كروم وسفاري وفايرفوكس، ولكن ليس على الإطلاق في 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();});
});

وكان يعمل مع

ومسج خاصيتين دعا naturalWidth وnaturalHeight، يمكنك استخدامها في هذا السبيل. 

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

وأين بلدي IMG هو اسم الفئة المستخدمة لتحديد صورة بلدي.

وكما ذكر من قبل، <وأ href = "https://stackoverflow.com/questions/318630/get-real-image-width-and-height-with-javascript-in-safari-chrome/670433#670433" > تشابي الإجابة سوف لا تعمل إذا صور في ذاكرة التخزين المؤقت. القضية يستجيب لبكت لا إطلاق الحدث الحمل على الصور المخزنة مؤقتا، حتى إذا تم تعيين 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; 

});

إذا كنت بحاجة للحصول على حجم الصور تحميل حيوي التي قد تحصل مؤقتا (تحميل سابقا)، يمكنك استخدام أسلوب تشافي بالإضافة إلى سلسلة الاستعلام لتحريك تحديث ذاكرة التخزين المؤقت. الجانب السلبي هو أن ذلك سيكون سببا في طلب آخر إلى ملقم، لIMG التي بالفعل مؤقتا، وينبغي أن تكون متاحة بالفعل. بكت غبي. 

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;

});

ملاحظة: إذا كان لديك سلسلة استعلام مواقع المعلومات في img.src بالفعل، سيكون لديك ل<لأ href = "https://stackoverflow.com/questions/486896/adding-a-parameter-to-the-url-with- جافا سكريبت "> تحليل ذلك و إضافة المعلمة اضافية لمسح ذاكرة التخزين المؤقت.

وكما يقول لوقا سميث، تحميل صورة في حالة من الفوضى . انها ليست موثوقة على جميع المتصفحات. وقد أعطى هذا الواقع لي ألما كبيرا. ومن المؤكد أن الصورة المخزنة مؤقتا لا إطلاق الحدث على الإطلاق في بعض المتصفحات، حتى أولئك الذين قال "تحميل صورة أفضل من setTimeout" مخطئون.

الحل

ولوك سميث هو هنا.

وهناك مناقشة مثيرة للاهتمام حول كيفية هذا يمكن معالجة الفوضى في مسج 1.4.

ولقد وجدت أنه من موثوق جدا لضبط العرض إلى 0، ثم الانتظار لخاصية "كاملة" للذهاب الملكية الحقيقية والعرض يأتي في أكبر من الصفر. يجب مراقبة الأخطاء أيضا. 

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

من كريس التعليق: http://api.jquery.com/load-event/

وضعي ربما مختلفة قليلا. أنا المتغيرة بشكل حيوي SRC للصورة عن طريق جافا سكريبت واللازمة لضمان أن الصورة الجديدة الحجم نسبيا لتناسب الحاويات الثابتة (في معرض الصور الفوتوغرافية). أود في البداية مجرد إزالة العرض والصفات ارتفاع الصورة بعد تحميل (عبر الحدث تحميل الصورة) وإعادة هذه بعد حساب أبعاد المفضلة. ومع ذلك، لم يفلح في رحلات السفاري وربما IE (أنا لم تختبر في IE تماما، ولكن الصورة لا تظهر حتى، لذلك ...).

وعلى أي حال، وسفاري يحافظ على أبعاد الصورة السابقة حتى أبعاد هي دائما وراء صورة واحدة. وأفترض أن هذا له علاقة مع ذاكرة التخزين المؤقت. حتى أبسط حل هو مجرد استنساخ الصورة وإضافته إلى DOM (من المهم أن تضاف إلى DOM للحصول على مع والارتفاع). إعطاء صورة قيمة ضوح سرية (لا تستخدم العرض لا شيء لأنه لن ينجح). بعد حصولك على أبعاد إزالة استنساخ.

وهنا هو رمز بلادي باستخدام مسج: 

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

ويعمل هذا الحل على أي حال.

والآن هناك المساعد مسج، event.special.load، للتعامل مع الحالات التي يكون فيها الحدث تحميل على صورة مؤقتا لا يتم إطلاق: <لأ href = "http://github.com/peol/jquery.imgloaded/raw/ السيد / ahpi.imgload.js "يختلط =" نوفولو "> http://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js

ومؤخرا كنت في حاجة للعثور على العرض والارتفاع لتحديد الحجم الافتراضي .dialog يمثل الرسم البياني. استخدام الحل الأول هو: 

 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، أوبرا 10، IE 8،7،6

وP.S. قد تكون تجد بعض المزيد من الحلول يبحث داخل بعض الإضافات مثل العلبة الخفيفة أو صندوق عرض الشرائح

لإضافة إلى الإجابة تشابي، <الإضراب> بول الايرلندي جيثب <أ href = ل "https://github.com/desandro/imagesloaded" يختلط = "نوفولو"> gitgub ديفيد Desandro ويقدم وظيفة تسمى imagesLoaded () التي تعمل على نفس المبادئ، ويحصل حول مشكلة الصور المخبأة بعض المتصفح لا إطلاق الحدث .load () (مع original_src ذكي -> 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/

ولقد فعلت بعض من وظيفة الحل فائدة، وذلك باستخدام 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}));
            },

ويمكنك استخدام هذا عن طريق تمرير رابط، وظيفة وسياقها. يتم تنفيذ وظيفة بعد تحميل الصورة والعودة خلق صورة، عرض وارتفاع. 

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

إذا كانت الصورة المستخدمة بالفعل ، sholud:

  1. تعيين صورة simensions الأولية

    صورة.css('width', 'الأولى');صورة.css('ارتفاع', 'الأولى');

  2. الحصول على الأبعاد

    فار originalWidth = $(this).width();فار originalHeight = $(this).الارتفاع();

ويمكنك استخدام خصائص 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 وما دون.

لوظائف حيث كنت لا ترغب في تغيير وضع الأصلي أو صورة. 

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

وراجعت الجواب من ديو ويعمل كبيرة بالنسبة لي.

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

تأكد من أنه يمكنك استدعاء كل ما تبذلونه من وظائف اسو. التي تتعامل مع حجم الصورة في وظيفة recaller من fadeIn ().

وشكرا لهذا.

ويمكنني استخدام نهج مختلف، ببساطة إجراء مكالمة أياكس إلى خادم للحصول على حجم الصورة عند الكائن صورة قيد الاستخدام. 

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

وتحقق من هذا المستودع في جيثب!

مثال عظيم للتحقق من العرض والارتفاع باستخدام جافا سكريبت

https://github.com/AzizAK/ImageRealSize

و--- طلب تعديل من بعض التعليقات ..

وكود جافا سكريبت: 

 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>
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top