JS - Bild Breite und Höhe aus dem Base64 Code

Question

Ich habe eine base64 img encoded, die Sie here finden können. Wie bekomme ich die Höhe und die Breite davon?

Answer 1

var i = new Image(); 

i.onload = function(){ 
alert(i.width+", "+i.height); 
}; 

i.src = imageData; 

Answer 2

Erstellen Sie ein verstecktes mit diesem Bild und verwenden Sie dann jquery .width() und. Höhe()

$("body").append("<img id='hiddenImage' src='"+imageData+"' />"); 
var width = $('#hiddenImage').width(); 
var height = $('#hiddenImage').height(); 
$('#hiddenImage').remove(); 
alert("width:"+width+" height:"+height); 

Test hier: FIDDLE

Das Bild wird zunächst nicht verborgen erstellt. es wird erstellt, dann erhalten Sie Breite und Höhe und dann entfernen Sie es. Dies kann zu einer sehr kurzen Sichtbarkeit in großen Bildern führen. In diesem Fall müssen Sie das Bild in einen anderen Container einbinden und den Container nicht das Bild selbst verbergen.

---

Ein weiterer Fiddle, die nicht als pro gp Anser zu dom hinzufügt. HERE

Answer 3

Ich fand, dass .naturalWidth und .naturalHeight mit die besten Ergebnisse hatte.

var img = new Image(); 

img.onload = function() { 
    var imgWidth = img.naturalWidth, 
     imgHeight = img.naturalHeight; 
}; 

Dies wird nur in modernen Browsern unterstützt. http://www.jacklmoore.com/notes/naturalwidth-and-naturalheight-in-ie/

Answer 4

Für synchrone Anwendung wickeln nur in ein Versprechen wie folgt aus:

function getImageDimensions(file) { 
    return new Promise (function (resolved, rejected) { 
    var i = new Image() 
    i.onload = function(){ 
     resolved({w: i.width, h: i.height}) 
    }; 
    i.src = file 
    }) 
} 

dann können Sie warten, um die Daten in synchronen Kodierung der Art zu erhalten:

var dimensions = await getImageDimensions(file)