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

Odpowiedzi:

152 
var i = new Image(); 

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

i.src = imageData;
gp.
źródło
1
po prostu super, sprawdzenie rozmiaru zajmuje połowę czasu, bardzo dziękuję!
bombastic
9
szkoda, że ​​jest to proces asynchroniczny.
Coen Damen
2
@CoenDamen yep. Potrzebuję również procesu synchronicznego.
1,21 gigawata
Jesteś niesamowity
Valdrinium,
13
Dodam też, że kolejność tutaj jest bardzo ważna. Jeśli zrobisz to na odwrót (src przed onload), możesz przegapić wydarzenie. Zobacz: stackoverflow.com/a/2342181/4826740
maxshuty
34

W przypadku użycia synchronicznego po prostu zawiń go w taką obietnicę:

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żesz użyć await, aby uzyskać dane w synchronicznym stylu kodowania:

var dimensions = await getImageDimensions(file)
EscapeNetscape
źródło
1
Jednak nadal jest asynchroniczny. Używam tylko cukru syntaktycznego.
gustavopch
„naturalWidth” i „naturalHeight” to lepsze opcje, prawda? stackoverflow.com/questions/28167137/…
Crashalot,
11

Odkryłem, że używając .naturalWidthi .naturalHeightmiałem najlepsze wyniki.

const img = new Image();

img.src = 'https://via.placeholder.com/350x150';

img.onload = function() {
  const imgWidth = img.naturalWidth;
  const imgHeight = img.naturalHeight;

  console.log('imgWidth: ', imgWidth);
  console.log('imgHeight: ', imgHeight);
};

Dokumenty:

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

Bill Keller
źródło
2

Utwórz ukryty <img>obraz 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);

Przetestuj tutaj: FIDDLE

Obraz nie jest początkowo tworzony jako ukryty. zostanie utworzony, a następnie uzyskasz szerokość i wysokość, a następnie ją usuniesz. Może to spowodować bardzo krótką widoczność w dużych obrazach, w tym przypadku musisz umieścić obraz w innym pojemniku i ukryć ten pojemnik, a nie sam obraz.

Kolejny Fiddle, który nie dodaje do domeny dom według odpowiedzi gp .: TUTAJ

Desu
źródło
var i = new Image (); i.src = imageData; setTimeout (function () {alert ("width:" + i.width + "height:" + i.height);}, 100);
gp.
jest to tylko poprawka potrzebna ze względu na naturę jsfiddle, zamiast tego można zmienić onLoad na onDomReady, aby naprawić początkowy problem z zerową szerokością i wysokością. Kod zakłada, że ​​wywołujesz tę funkcję gdzieś w swojej pracy, gdzie dokument jest już załadowany.
Desu
Chyba chodziło Ci o to, że nie musisz niczego dodawać do dom, aby uzyskać szerokość i wysokość. Zmodyfikuje odpowiedź, aby odzwierciedlić Twoje sugestie.
Desu