Holen Sie sich das echte Breite und Höhe eines Bildes mit JavaScript? (In Safari / Chrome)
https://stackoverflow.com/questions/318630
-
11-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Ich bin eine jQuery-Plugin zu schaffen.
Wie erhalte ich reelles Bild Breite und Höhe mit Javascript in Safari?
Nach Arbeiten mit Firefox 3, Internet Explorer 7 und 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();
Aber in Webkit-Browser wie Safari und Google Chrome Werte sind 0.
Lösung
Webkit Browser so einstellen, die Höhe und Breite Eigenschaft, nachdem das Bild geladen wird. Stattdessen Timeouts zu verwenden, würde ich empfehlen, ein Bild Onload-Ereignis verwenden. Hier ist ein kleines Beispiel:
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.
});
Um einen der Effekte CSS zu vermeiden könnte auf das Image der Dimensionen haben, macht der Code über eine im Speicher Kopie des Bildes. Dies ist eine sehr clevere Lösung von FDisk vorgeschlagen.
Sie können auch die naturalHeight verwenden und naturalWidth HTML5-Attribute.
Andere Tipps
Mit den naturalHeight und naturalWidth Attributen von HTML5 .
Zum Beispiel:
var h = document.querySelector('img').naturalHeight;
Arbeiten in IE9 +, Chrome, Firefox, Safari und Opera ( Statistiken ).
function getOriginalWidthOfImg(img_element) {
var t = new Image();
t.src = (img_element.getAttribute ? img_element.getAttribute("src") : false) || img_element.src;
return t.width;
}
Sie brauchen nicht Stil zu entfernen Bild oder Bildabmessungen Attribute. Erstellen Sie einfach ein Element mit Javascript und bekommen Sie die erstellte Objektbreite.
Das eigentliche Problem besteht darin, dass WebKit-Browser (Safari und Chrome) Last JavaScript und CSS-Informationen in parallel. So führen Sie JavaScript, bevor die Styling-Effekte von CSS berechnet wurden, die falsche Antwort zurück. In jQuery, ich habe festgestellt, dass die Lösung bis document.readyState == 'complete', .e.g zu warten ist.
jQuery(document).ready(function(){
if (jQuery.browser.safari && document.readyState != "complete"){
//console.info('ready...');
setTimeout( arguments.callee, 100 );
return;
}
... (rest of function)
Was Breite und Höhe geht ... je nachdem, was Sie tun, Sie offset und offset möchten, die Dinge wie Grenzen und Polsterung umfassen.
Es gibt viele Diskussionen in der akzeptierten Antwort über ein Problem, wo das onload Ereignis nicht ausgelöst wird, wenn ein Bild aus der WebKit-Cache geladen wird.
In meinem Fall onload Feuer für gecached Bilder, aber die Höhe und Breite sind noch 0. Eine einfache setTimeout das Problem für mich gelöst:
$("img").one("load", function(){
var img = this;
setTimeout(function(){
// do something based on img.width and/or img.height
}, 0);
});
Ich kann nicht sprechen, warum das onload Ereignis feuert selbst wenn das Bild aus dem Cache (Verbesserung von jQuery 1.4 / 1.5?) Geladen wird - aber wenn Sie immer noch das Problem, vielleicht eine Kombination aus meiner Antwort und die var src = img.src; img.src = ""; img.src = src; Technik funktioniert.
(Beachten Sie, dass für meine Zwecke, ich bin nicht besorgt über vordefinierte Dimensionen, entweder in das Bild der Attribute oder CSS-Stile - aber Sie könnten diejenigen, wie pro Xavi Antwort entfernen möchten, oder das Bild klonen.).
das funktioniert für mich (Safari 3.2), indem aus dem window.onload Ereignisse Brennen:
$(window).load(function() {
var pic = $('img');
pic.removeAttr("width");
pic.removeAttr("height");
alert( pic.width() );
alert( pic.height() );
});
Sie können programmatisch das Bild erhalten und die Dimensionen überprüfen Javascript verwenden, ohne überhaupt mit dem DOM zu Chaos mit.
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';
Was ist image.naturalHeight und image.naturalWidth Eigenschaften?
Es scheint gut zu funktionieren wieder ziemlich viele Versionen in Chrome, Safari und Firefox, aber nicht in IE8 oder IE9 sogar.
Wie wir richtig reale Dimensionen ohne Blinzeln reelles Bild zu bekommen:
(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();});
});
Es funktioniert mit
JQuery hat zwei Eigenschaften genannt naturalWidth und naturalHeight, Sie auf diese Weise verwenden können.
$('.my-img')[0].naturalWidth
$('.my-img')[0].naturalHeight
Wo ist mein-img ein Klassenname verwendet mein Bild wählen.
Wie bereits erwähnt, Xavi beantworten funktioniert nicht, wenn Bilder im Cache sind. Das Problem reagiert das Load-Ereignis nicht auf WebKit auf zwischengespeicherte Bildern schießen, so dass, wenn die Breite / Höhe attrs werden nicht explizit im img-Tag gesetzt, der einzige zuverlässige Weg, um die Bilder zu bekommen, ist für das window.load Ereignis warten abgefeuert werden.
Das window.load Ereignis wird ausgelöst, immer , so dass es sicher ist, nach, dass die Breite / Höhe und img zuzugreifen, ohne jeden Trick.
$(window).load(function(){
//these all work
$('img#someId').css('width');
$('img#someId').width();
$('img#someId').get(0).style.width;
$('img#someId').get(0).width;
});
Wenn Sie die Größe der dynamisch geladene Bilder erhalten müssen, die zwischengespeichert bekommen könnte (zuvor geladene), können Sie Xavi Methode verwenden und eine Abfrage-Zeichenfolge eine Cache-Aktualisierung auslösen. Der Nachteil ist, dass es eine weitere Anforderung an den Server verursachen, für einen img, die bereits im Cache gespeichert und soll bereits vorhanden sein. Dumm 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: wenn Sie eine Abfrage-Zeichenfolge in der img.src bereits haben, müssen Sie auf analysieren es und fügen sie den zusätzlichen param den Cache zu löschen.
Wie Luke Smith sagt: Bild Last ist ein Chaos . Es ist nicht zuverlässig auf allen Browsern. Diese Tatsache hat mir große Schmerzen gegeben. Ein Cache-Bild wird nicht das Ereignis ausgelöst überhaupt in einigen Browsern, so dass diejenigen, die „Bild Last ist besser als SetTimeout“ sind falsch.
Luke Smith Lösung hier.
Und es gibt eine interessante Diskussion darüber, wie diese Chaos könnte in jQuery 1.4 behandelt werden.
Ich habe festgestellt, dass es ziemlich zuverlässig ist die Breite auf 0 zu setzen, dann für die „vollständige“ Eigenschaft wartet auf true und die Eigenschaft width kommt in größer als Null zu gehen. Sie sollten auf Fehler beobachten, auch.
$("#myImg").one("load",function(){
//do something, like getting image width/height
}).each(function(){
if(this.complete) $(this).trigger("load");
});
Von Chris' Kommentar: http://api.jquery.com/load-event/
Meine Situation ist wahrscheinlich ein wenig anders. Ich ändere dynamisch die src eines Bildes über Javascript und notwendig, um sicherzustellen, dass das neue Bild Größe ist proportional einen festen Behälter (in einer Fotogalerie) zu passen. I entfernt zunächst nur die Breite und Höhe Attribute des Bildes, nachdem es geladen wird (über das Load-Ereignis des Bildes) und Reset diese nach den bevorzugten Abmessungen berechnet wird. Allerdings bedeutet das nicht in Safari und möglicherweise IE (ich habe es nicht in IE gründlich getestet, aber das Bild nicht einmal zeigen, so ...).
Wie auch immer, hält Safari die Dimensionen des vorherigen Bildes, so dass die Dimensionen hinter immer ein Bild sind. Ich gehe davon aus, dass dies etwas mit dem Cache zu tun hat. So ist die einfachste Lösung ist, einfach das Bild zu klonen und fügen Sie es den DOM (es ist wichtig, dass es in den DOM hinzugefügt werden, die bekommen das mit und Höhe). Geben Sie das Bild einen Sichtbarkeitswert verborgenen (nicht Anzeige keine benutzen, weil es nicht funktioniert). Nachdem Sie die Abmessungen des Klons entfernen erhalten.
Hier ist mein Code mit 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);
Diese Lösung funktioniert auf jeden Fall.
Es gibt jetzt eine jQuery-Plugin, event.special.load, Fälle zu behandeln, bei denen die Last Ereignis in einem Cache gespeicherten Bild nicht ausgelöst: http://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js
Vor kurzem musste ich für die Einstellung Standardgröße von .dialog repräsentiert Graph Breite und Höhe finden. Lösung I Gebrauch war:
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 })
})
Für mich funktioniert das in FF3, Opera 10, IE 8,7,6
P. S. Diese können Sie einige weitere Lösungen finden Suche innerhalb einiger Plugins wie LightBox oder ColorBox
Um zu Xavi Antwort hinzufügen, Paul Irish des Github David Desandro der gitgub bietet eine Funktion imagesLoaded () genannt, die auf den gleichen Prinzipien arbeitet, und wird, um das Problem einiger gecached Bilder des Browsers nicht die .load () Ereignis (mit cleveren original_src -> data_uri -> original_src Schalt) Brennen.
Es ist weit verbreitet und regelmäßig aktualisiert werden, was dazu beiträgt, es die robusteste Lösung für das Problem ist, meiner Meinung nach.
Dies funktioniert sowohl im Cache gespeichert und dynamisch geladenen Bilder.
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.");
}
}
}
dieses Skript verwendet werden:
function AlertImageSize(image) {
alert("Image size: " + image.width + "x" + image.height);
}
LoadImage("http://example.org/image.png", AlertImageSize);
Ich habe einige Abhilfe Nutzenfunktion getan, imagesLoaded jquery Plugin: 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}));
},
Sie können dies nutzen, indem URL, Funktion und dessen Kontext. Funktion ausgeführt wird, nachdem Bild geladen ist und das Rück geschaffenes Bild, dessen Breite und Höhe.
waitForImageSize("image.png", function(w,h){alert(w+","+h)},this)
Wenn das Bild bereits verwendet wird, Sie sholud:
-
set Bild simensions Erstausbildung
image.css ( 'width', 'Anfang'); image.css ( 'height', 'Anfang');
-
get Dimensionen
var Originalwidth = $ (this) .width (); var originalHeight = $ (this) .height ();
Sie können die naturalWidth und naturalHeight Eigenschaften des HTML-Bildelement verwenden. (Hier ist mehr info ).
Sie würde es so verwenden:
//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;
Es scheint, wie dies in allen Browsern funktioniert außer auf IE ab Version 8 und unten.
Für Funktionen, bei denen Sie nicht möchten, die ursprüngliche Platzierung oder das Bild ändern.
$(this).clone().removeAttr("width").attr("width");
$(this).clone().removeAttr("height").attr("height);
überprüfte ich die Antwort von Dio und es funktioniert gut für mich.
$('#image').fadeIn(10,function () {var tmpW = $(this).width(); var tmpH = $(this).height(); });
Stellen Sie sicher, dass Sie aso alle Funktionen aufrufen. dass Griff mit der Bildgröße in der Funktion des Recaller fadeIn ().
Danke für diesen.
ich anderen Ansatz verwenden, einfach Ajax-Aufruf zum Server macht die Bildgröße zu erhalten, wenn Bildobjekt verwendet wird.
//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);
}
}
und natürlich serverseitigen Code:
<?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);
?>
Dies funktioniert Cross-Browser
var img = new Image();
$(img).bind('load error', function(e)
{
$.data(img, 'dimensions', { 'width': img.width, 'height': img.height });
});
img.src = imgs[i];
die Dimensionen erhalten, indem mit
$(this).data('dimensions').width;
$(this).data('dimensions').height;
Cheers!
Ein weiterer Vorschlag ist die Verwendung imagesLoaded Plugin .
$("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);
}
});
// Dieser Code hilft mit 200 * 274 dimention Bild zeigen
Hier ist eine Cross-Browser-Lösung, die ein Ereignis auslöst, wenn die ausgewählten Bilder werden geladen: http: //desandro.github .io / imagesloaded / die Höhe und Breite innerhalb der imagesLoaded () Funktion nachschlagen kann.
auf diesen Thread gestolpert versucht, eine Antwort auf meine eigene Frage zu finden. Ich hatte versucht, in einer Funktion nach dem Lade ein Bild Breite / Höhe zu erhalten, und hielt mit 0 komme ich so fühlen könnte das sein, was Sie suchen, obwohl, wie es für mich funktioniert:
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);
}
Überprüfen Sie dieses Repository in Github aus!
Groß Beispiel die Breite und Höhe mit Javascript zu überprüfen
https://github.com/AzizAK/ImageRealSize
--- Edited wird von einigen Kommentaren angefordert ..
Javascript-Code:
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);
}
und HTML-Code:
<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>
