Получить реальную ширину и высоту изображения с помощью JavaScript?(в Safari/ Chrome)
https://stackoverflow.com/questions/318630
-
11-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Я создаю плагин 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 устанавливают свойство высоты и ширины после загрузки изображения. Вместо использования тайм-аутов я бы рекомендовал использовать событие загрузки изображения. Вот быстрый пример:
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.
Другие советы
Используйте атрибуты Например: Работает в IE9 +, Chrome, Firefox, Safari и Opera ( stats ). naturalHeight и naturalWidth из HTML5 .
var h = document.querySelector('img').naturalHeight;
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 == 'complete', .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 не срабатывает, если изображение загружается из кэша WebKit.
В моем случае setTimeout запускается для кэшированных изображений, но высота и ширина по-прежнему равны 0. Простой var src = img.src; img.src = ""; img.src = src; решил эту проблему для меня:
$("img").one("load", function(){
var img = this;
setTimeout(function(){
// do something based on img.width and/or img.height
}, 0);
});
Я не могу сказать, почему событие <=> срабатывает, даже когда изображение загружается из кэша (улучшение jQuery 1.4 / 1.5?) & # 8212; но если вы все еще испытываете эту проблему, возможно, сработает сочетание моего ответа и метода <=>.
(Обратите внимание, что для моих целей меня не интересуют предварительно определенные измерения, как в атрибутах изображения, так и в стилях CSS & # 8212; но вы можете удалить их в соответствии с ответом Хави. Или клонировать изображение.)
это работает для меня (сафари 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
Где my-img - это имя класса, используемое для выбора моего изображения.
Как было сказано ранее, Ответ Хави не будет работать, если изображения находятся в кеше. Эта проблема связана с тем, что webkit не запускает событие load для кэшированных изображений, поэтому, если атрибуты width / height явно не заданы в теге img, единственный надежный способ получить изображения - дождаться запуска события window.load. .
Событие img.src будет вызывать всегда , так что после этого можно без труда получить доступ к ширине / высоте и 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 в <=>, вам потребуется разобрать его и добавить дополнительный параметр для очистки кэша.
Как говорит Люк Смит, загрузка изображений - беспорядок . Это не надежно во всех браузерах. Этот факт причинил мне большую боль. Кэшированное изображение вообще не будет запускать событие в некоторых браузерах, поэтому те, кто сказал & Quot; загрузка изображения лучше, чем setTimeout & Quot; не правы.
Решение Люка Смита здесь.
И есть интересная дискуссия о том, как это Беспорядок может быть обработан в JQuery 1.4.
Я обнаружил, что довольно надежно установить ширину равной 0, а затем ждать " complete " свойство true и значение width больше нуля. Вам также следует следить за ошибками.
$("#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 изображения через javascript, и мне нужно было убедиться, что новое изображение имеет размеры, пропорциональные размеру фиксированного контейнера (в фотогалерее). Сначала я просто удалил атрибуты ширины и высоты изображения после его загрузки (через событие загрузки изображения) и сбросил их после расчета предпочтительных размеров. Однако, это не работает в Safari и, возможно, IE (я не проверил это в IE полностью, но изображение даже не показывается, так что ...).
В любом случае, Safari сохраняет размеры предыдущего изображения, поэтому размеры всегда остаются позади одного изображения. Я предполагаю, что это как-то связано с кешем. Таким образом, самое простое решение - просто клонировать изображение и добавить его в DOM (важно, чтобы оно было добавлено в DOM для получения и высоты). Дайте изображению значение видимости скрытого (не используйте display none, потому что оно не будет работать). После того, как вы получите размеры, удалите клон.
Вот мой код с использованием 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
Недавно мне нужно было найти ширину и высоту для установки размера по умолчанию .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, Opera 10, Т.е. 8,7,6
P.S.Возможно, вы найдете еще несколько решений, заглянув в некоторые плагины, такие как LightBox или ColorBox
Чтобы добавить ответ Хави, гитаб Пола Ирландского gitgub Дэвида Десандро предлагает функцию imagesLoaded () , которая работает по тем же принципам и решает проблему кэшированных изображений некоторых браузеров. не запускать событие .load () (с умным original_src - > data_uri - > original_src switch).
Он широко используется и регулярно обновляется, что делает его наиболее надежным решением проблемы, 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 jquery: 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)
Если изображение уже используется, вы должны:
<Ол>установите начальные размеры изображения
image.css ('width', 'initial'); image.css ('height', 'initial');
получить размеры
var originalWidth = $ (this) .width (); var originalHeight = $ (this) .height ();
Вы можете использовать свойства naturalWidth и naturalHeight элемента изображения HTML. (Дополнительная информация info ).
Вы бы использовали это так:
//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);
Я проверил ответ Dio, и он отлично подходит для меня.
$('#image').fadeIn(10,function () {var tmpW = $(this).width(); var tmpH = $(this).height(); });
Убедитесь, что вы вызываете все свои функции aso.это зависит от размера изображения в функции recaller 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>
