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

Antworten:

143 
var i = new Image(); 

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

i.src = imageData;
gp.
quelle
einfach genial, es dauert die halbe Zeit, um die Größe zu überprüfen, vielen Dank!
bombastisch
5
Schade, dass dies ein asynchroner Prozess ist.
Coen Damen
@CoenDamen yep. Ich brauche auch einen synchronen Prozess.
1,21 Gigawatt
Sie sind fantastisch
Valdrinium
12
Ich möchte auch hinzufügen, dass die Reihenfolge hier sehr wichtig ist. Wenn Sie dies umgekehrt tun (src vor dem Laden), verpassen Sie möglicherweise das Ereignis. Siehe: stackoverflow.com/a/2342181/4826740
maxshuty
32

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)
EscapeNetscape
quelle
1
Es ist jedoch immer noch asynchron. Nur mit syntaktischem Zucker.
Gustavopch
"naturalWidth" und "naturalHeight" sind die bessere Wahl, nicht wahr? stackoverflow.com/questions/28167137/…
Crashalot
6

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/

Bill Keller
quelle
2

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

Desu
quelle
var i = neues Bild (); i.src = imageData; setTimeout (function () {alert ("width:" + i.width + "height:" + i.height);}, 100);
gp.
Dies ist nur eine Korrektur, die aufgrund der Art der jsfiddle erforderlich ist. Sie können onLoad stattdessen in onDomReady ändern, um das anfängliche Problem mit der Breite und Höhe von 0 zu beheben. Code setzt voraus, dass Sie diese Funktion irgendwo in Ihrer Arbeit aufrufen, wo das Dokument bereits geladen ist.
Desu
Vermutlich war Ihr Punkt, dass Sie dom nichts hinzufügen müssen, um Breite und Höhe zu erhalten. Ändert die Antwort entsprechend Ihren Vorschlägen.
Desu