JS - ottenere la larghezza e l'altezza dell'immagine dal codice base64

Question

Ho un base64 img encoded che si può trovare here. Come posso ottenere l'altezza e la larghezza di esso?

Answer 1

var i = new Image(); 

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

i.src = imageData; 

Answer 2

Creare un <img> nascosta con quell'immagine e quindi utilizzare jQuery .width() e. altezza()

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

test: FIDDLE

immagine non viene inizialmente creato nascosto. viene creato, quindi si ottiene larghezza e altezza e quindi rimuoverlo. Ciò potrebbe causare una visibilità molto breve nelle immagini di grandi dimensioni in questo caso è necessario avvolgere l'immagine in un altro contenitore e rendere nascosto quel contenitore non l'immagine stessa.

---

Un'altra Fiddle che non aggiunge a dom secondo gp di Anser:. HERE

Answer 3

ho trovato che utilizzando .naturalWidth e .naturalHeight avuto i migliori risultati.

var img = new Image(); 

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

Questo è supportato solo nei browser moderni. http://www.jacklmoore.com/notes/naturalwidth-and-naturalheight-in-ie/

Answer 4

Per uso sincrono Basta avvolgere in una promessa come questa:

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 
    }) 
} 

quindi è possibile utilizzare attendono per ottenere i dati in sincrono stile di codifica:

var dimensions = await getImageDimensions(file)