JS - Bildbreite und -höhe aus dem base64-Code abrufen

Ich habe eine Base64-IMG-Codierung, die Sie hier finden können . Wie kann ich die Höhe und Breite ermitteln?

var i = new Image(); 

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

i.src = imageData; 

Für den synchronen Gebrauch wickeln Sie es einfach in ein Versprechen wie dieses ein:

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 wait verwenden, um die Daten im synchronen Codierungsstil abzurufen:

var dimensions = await getImageDimensions(file)

Ich fand das mit .naturalWidthund .naturalHeighthatte die besten Ergebnisse.

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

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

Erstellen Sie <img>mit diesem Bild ein verstecktes 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 versteckt erstellt. es wird erstellt, dann erhalten Sie Breite und Höhe und entfernen es dann. Dies kann bei großen Bildern zu einer sehr kurzen Sichtbarkeit führen. In diesem Fall müssen Sie das Bild in einen anderen Container einwickeln und diesen Container nicht das Bild selbst verbergen.

Eine weitere Geige, die gemäß dem Anser von gp. Nicht zu dom hinzugefügt wird: HIER