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; 

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)

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/


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


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
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.