Autor Zpráva
petrfox
Profil *
Na serveru uložený obrázek má jiný rozměr než odpovídá atributům width a height elementu img v HTML kódu stránky. HTML kód vypadá například takto:
<img src="alfa.jpg" width="150" height="100">, ale soubor alfa.jpg uložený na serveru má rozměry 300 x 200 px. Když pro práci s obrázkem v JQuery (javascriptu) potřebujeme skutečné rozměry, je komplikované je získat. Hodnota javascriptových" vlastností "width" a "height" totiž odpovídá hodnotám uvedeným v atributech elementu img, případně v přiřazené CSS třídě, nikoli skutečným rozměrům obrázku na serveru.
Abychom získali skutečné rozměry, musíme odstranit atributy width a height v elementu img a stejnojmenné vlastnosti v CSS, jako je to například v řešení http://stackoverflow.com/questions/318630/get-real-image-width-and-height-with-javascript-in-safari-chrome . Jenže pak vznikne problém - obrázek "nesešněrovaný" nastavenými rozměry se v prohlížeči ukáže v "serverové" velikosti a změní vzhled stránky. Pokud si předem oba rozměry uložíme a hned po zjištění skutečných rozměrů je vrátíme do atributů nebo CSS, nemusíme si ani všimnout "probliknutí", tedy dočasné změny obrázku. Nicméně je to nepříjemné. Lepší řešení je udělat si kopii obrázku a rozměry zjišťovat na ní.
Tady vznikne další problém - když z kopie (klonu) odstraníme příslušné atributy a CSS a chceme zjistit rozměr, výsledkem je - na rozdíl od téhož postupu u originálu - nula! Abychom dostali skutečné rozměry, nestačí pracovat jen s objektem, ale tento objekt musíme připojit do stránky. Aby nedošlo k zobrazení ve stránce (tedy k někdy nezřetelnému probliknutí), stačí klonu před připojením přiřadit CSS vlastnost "display:none", případně pro jistotu ještě odsunout obrázek mimo monitor například vlastnostmi "position:absolute;left:-9000px".

(function( $ ){
   $.fn.getDimensions=function(){
         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 not shows 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].width);
         //To hide a clone
         ku.css({"visibility" : "hidden",'position':'absolute','left':'-9999'}); 
         //A clone appending
         $(document.body).append (ku[0]);
         alert("We get right dimensions: "+ $(ku)[0].width+"/"+$(ku)[0].width);
         //To remove a clone
         $("#mnbv1lk87jhy0utrd").remove();
   }
})( jQuery );

$(document).ready(function(){
   $("img.toreaddimensions").load(function(){$(this).getDimensions();});
});
kazan
Profil
petrfox:
Napsal jsem to omylem bez přihlášení, tak to nemohu opravit - chybička se vloudila do textu - při skrytí klonu nelze nastavovat display:none - IE8 pak (narozdíl od FF) přisoudí obrázku nulové rozměry. Kód je ale OK.
__construct
Profil
petrfox:
Fajn a čo potrebuješ od nás? Pokiaľ si len chcel zdeliť, že si vygoogloval riešenie svojho problému - založ si blog.
Chamurappi
Profil
Reaguji na kazana:
Ten skript je na první pohled pochybný, protože naprosto zbytečně pracuje s globálními proměnnými.

Proč klonovat existující obrázek a mazat mu pak všechno, co může ovlivnit rozměry, když můžeš vyrobit zbrusu nový?

Já bych na to šel jednoduše:
function zjistiRozmery(uri)
{
  var temp = new Image();
  temp.onload = function()
  {
    alert("Rozměry jsou: " + temp.width + "×" + temp.height);
  };
  temp.src = uri;
}

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: