Firefox .naturalHeight Eigenschaft

Question

Ich habe den folgenden Code:

var checkImgDim=new Image(); 
checkImgDim.src=e.target.result; 

if (input.files[0].size > MAX_SIZE) 
    setError("File too large - max 3MB"); 

else if (checkImgDim.naturalHeight < MIN_H || 
      checkImgDim.naturalWidth < MIN_W) 
    setError("Image dimensions too small"); 

Es funktioniert gut unter Chrome jedoch mit Firefox ich inkonsistente Ergebnisse bekommen, weil es scheint, dass naturalHeight und naturalWidth return 0 manchmal und es gibt eine Verzögerung, bevor die Werte werden festgelegt. Ich möchte das Bild nicht in das DOM laden oder .onload() verwenden, der ganze Zweck des Codes besteht lediglich darin, die Bildabmessungen zu überprüfen. Ich denke nicht, dass es eine gute Übung wäre, hier eine Zeitverzögerung hinzuzufügen. Kann mir bitte jemand sagen, wie man die Bildmaße richtig kontrolliert?

Answer 1

Sie können die Bildgröße vor dem Laden nicht ermitteln. Sie sollten das Ereignis load des Bildes trotzdem verwenden. Selbst wenn die Bild-URL tatsächlich eine Daten-URI ist (z. B. wenn sie von einer FileReader stammt), wird sie asynchron in das Bildobjekt "" geladen.

Es ist nicht notwendig, das Bild als HTML-Element in DOM einzufügen. Erstellen Sie einfach ein neues Objekt Image, fügen Sie einen Listener load hinzu, und legen Sie dann die Eigenschaft src fest.

Wenn das Bild schon vor heruntergeladen wurde, wird sie nicht erneut heruntergeladen werden - seine Cache-Kopie stattdessen verwendet werden (solange Client-seitiges Caching selbst wird nicht explizit über entsprechende Server-Response-Header deaktiviert) . Wenn die Bild-URL tatsächlich ein Daten-URI ist, wird überhaupt nicht heruntergeladen.

Beachten Sie, dass die Eigenschaften naturalWidth und relativ neu sind und einige Browser sie möglicherweise nicht unterstützen. Die Verwendung der regulären Eigenschaften width und height ist derzeit zuverlässiger und sie haben die gleichen Werte, solange ihre Werte nicht explizit zuvor geändert wurden.

Answer 2

EDITED OHNE ONLOAD:

Ich denke, die Bildgrößen kann, bevor es durch die Verwendung eines 0 Sekunden Intervall geladen wird - es wird technisch die Dimensionen zurückkehren, bevor onload aufgerufen, aber diese Lösung hat eine Verzögerung verwenden, wie Sie sagten, Du wolltest es vermeiden, aber ich kann mir keinen anderen Weg vorstellen. Dieser Weg ist zumindest schneller als Onload.

var loaded = false; 
var checkImgDim = new Image(); 

checkImgDim.onload = function() { loaded = true; }; 

var wait = setInterval(function() { 
    if (loaded) { 
     clearInterval(wait); 
    } else { 
     console.log(checkImgDim.naturalWidth, checkImgDim.naturalHeight); 
    } 
}, 0);