JS - pobierz szerokość i wysokość obrazu z kodu base64

Question

Mam base64 img encoded, który można znaleźć here. Jak mogę uzyskać wysokość i szerokość?

Answer 1

var i = new Image(); 

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

i.src = imageData; 

Answer 2

Utwórz ukryty <img> z tym obrazem, a następnie użyj jquery .width() i. Wysokość()

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

test tutaj: FIDDLE

Obraz nie jest stworzony początkowo ukryty. zostanie utworzony, wtedy otrzymasz szerokość i wysokość, a następnie ją usuniesz. Może to spowodować bardzo krótką widoczność na dużych obrazach, w tym przypadku musisz zawinąć obraz w innym pojemniku i uczynić ten pojemnik ukrytym, a nie sam obraz.

---

Innym Fiddle, że nie dodaje się dom według GPS Anser. HERE

Answer 3

Okazało się, że za pomocą .naturalWidth i .naturalHeight miał najlepsze wyniki.

var img = new Image(); 

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

Jest to obsługiwane tylko w nowoczesnych przeglądarkach. http://www.jacklmoore.com/notes/naturalwidth-and-naturalheight-in-ie/

Answer 4

synchronicznych zastosowanie tylko owinąć go do obietnicy, jak ta:

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

następnie można wykorzystać poczekać, aby uzyskać dane w synchronicznym stylu Kodowanie:

var dimensions = await getImageDimensions(file)