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

99

Mam zakodowany w base64 img, który możesz znaleźć tutaj . Jak mogę uzyskać jego wysokość i szerokość?

— pompatyczny
źródło

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