Получить реальную ширину и высоту изображения с помощью JavaScript? (в Safari / Chrome) - PullRequest
Новая
       89

Получить реальную ширину и высоту изображения с помощью JavaScript? (в Safari / Chrome)

272 голосов
/ 25 ноября 2008

Я создаю плагин 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.

Ответы [ 30 ]

1 голос
/ 26 февраля 2014

Если изображение уже используется, вы должны:

  1. установить начальные размеры изображения

    image.css ('width', 'initial'); image.css ('height', 'initial');

  2. получить размеры

    var originalWidth = $ (this) .width (); var originalHeight = $ (this) .height ();

0 голосов
/ 30 ноября 2015

Проверьте этот репозиторий в 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>
0 голосов
/ 27 августа 2009

Для функций, в которых вы не хотите изменять исходное расположение или изображение. 

$(this).clone().removeAttr("width").attr("width");
$(this).clone().removeAttr("height").attr("height);
0 голосов
/ 12 сентября 2013

Наткнулся на эту ветку, пытаясь найти ответ на свой вопрос. Я пытался определить ширину / высоту изображения в функции ПОСЛЕ загрузчика и продолжал получать 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);
}
0 голосов
/ 02 мая 2013

Вот кросс-браузерное решение, которое запускает событие при загрузке выбранных изображений: http://desandro.github.io/imagesloaded/. Вы можете посмотреть высоту и ширину в функции imagesLoaded ().

0 голосов
/ 14 декабря 2010

Я проверил ответ Дио, и он прекрасно работает для меня.

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

Убедитесь, что вы вызываете все свои функции так же. которые обрабатывают размер изображения в функции вызова функции fadeIn ().

Спасибо за это.

0 голосов
/ 03 августа 2012 
$(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

0 голосов
/ 10 декабря 2011

Еще одно предложение - использовать imagesLoaded плагин . 

$("img").imagesLoaded(function(){
alert( $(this).width() );
alert( $(this).height() );
});
0 голосов
/ 17 декабря 2010

Я использую другой подход, просто сделаю 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);

?>
0 голосов
/ 03 января 2012

Это работает кросс-браузер 

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;

Ура!

Страница:
...