Bildbreite und -höhe aus dem Base64-Code in JavaScript abrufen

Lesezeit: 4 Minuten

bombastisch

Ich habe ein Base64-Bild codiert, das Sie finden können Hier. Wie bekomme ich die Höhe und die Breite davon?

Link Rot hat sich dieser Frage angenommen

– Lukas

10. Januar 2022 um 12:35 Uhr
Ja. “Hmm. Wir haben Probleme, diese Seite zu finden. Wir können keine Verbindung zum Server unter soo.gd herstellen.”

– Peter Mortensen

31. Januar um 2:56

GP.

var i = new Image();

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

i.src = imageData;

einfach genial, es dauert die Hälfte der Zeit, um die Größe zu überprüfen, vielen Dank!

– bombastisch

21. Juli 2013 um 20:11 Uhr
Schade, dass dies ein asynchroner Prozess ist.

– Coen Damen

2. August 2015 um 11:06 Uhr
@CoenDamen ja. Ich brauche auch einen synchronen Prozess.

– 1,21 Gigawatt

14. Dezember 2016 um 19:08 Uhr
Du bist toll

– Valdrinium

15. Februar 2017 um 14:38 Uhr
Ich möchte auch hinzufügen, dass die Reihenfolge hier sehr wichtig ist. Wenn Sie dies umgekehrt tun (src vor onload), verpassen Sie möglicherweise das Ereignis. Siehe: stackoverflow.com/a/2342181/4826740

– maxhuty

4. April 2017 um 17:58 Uhr

Für die synchrone Verwendung packen Sie es einfach in ein Versprechen wie dieses:

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

var dimensions = await getImageDimensions(file)

Es ist aber immer noch asynchron. Nur mit syntaktischem Zucker.

– Gustavopch

15. Juli 2019 um 23:27 Uhr
‘naturalWidth’ und ‘naturalHeight’ sind die bessere Wahl, oder? stackoverflow.com/questions/28167137/…

– Absturz

27. Dezember 2019 um 23:28 Uhr

Bill Keller

Das habe ich mit gefunden .naturalWidth Und .naturalHeight hatte 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);
};

Dokumentation:

Dies wird nur in modernen Browsern unterstützt. NaturalWidth und NaturalHeight im IE

Genau, es ist die Originalgröße des Bildes vor der Größenänderung object-fit

– Cao Mạnh Quang

15. Februar 2021 um 4:09 Uhr

Waruyama

Eine modernere Lösung ist zu verwenden HTMLImageElement.decode() anstatt der onload Fall. decode() gibt ein Promise zurück und kann somit synchron mit verwendet werden await.

Asynchrone Nutzung:

let img = new Image();
img.src = "myImage.png";
img.decode().then(() => {
    let width = img.width;
    let height = img.height;
    // Do something with dimensions
});

Synchrone Verwendung (innerhalb einer asynchronen Funktion):

let img = new Image();
img.src = "myImage.png";
await img.decode();
let width = img.width;
let height = img.height;
// Do something with dimensions

Desu

Erstelle ein Versteck <img> mit diesem Bild und verwenden Sie dann jQuerys .width() und . Höhe()

$("body").append("<img id='hiddenImage' src="https://stackoverflow.com/questions/17774928/" + imageData + "" />");
var width = $('#hiddenImage').width();
var height = $('#hiddenImage').height();
$('#hiddenImage').remove();
alert("width:" + width + " height:" + height);

Hier testen: JSFiddle

Das Bild wird zunächst nicht versteckt erstellt. Es wird erstellt, und 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 packen und diesen Container ausblenden, nicht das Bild selbst.

Eine weitere Geige, die gemäß der Antwort von gp. nicht zum DOM hinzugefügt wird:
Hier

var i = neues Bild (); i.src = Bilddaten; setTimeout(function(){ alert ( “width:”+ i.width+” height:” + i.height ); },100);

– gp.

21. Juli 2013 um 17:59 Uhr
Dies ist nur eine Korrektur, die aufgrund der Art von jsfiddle erforderlich ist. Sie können stattdessen onLoad in onDomReady ändern, um das anfängliche Problem mit der Breite und Höhe von 0 zu beheben. Code geht davon aus, dass Sie diese Funktion irgendwo in Ihrer Arbeit aufrufen, wo das Dokument bereits geladen ist.

– Desu

21. Juli 2013 um 18:04 Uhr
Schätze, Ihr Punkt war, dass Sie nichts zu dom hinzufügen müssen, um Breite und Höhe zu erhalten. Wird die Antwort ändern, um Ihre Vorschläge widerzuspiegeln.

– Desu

21. Juli 2013 um 18:14 Uhr

var i = neues Bild (); i.src = Bilddaten; setTimeout(function(){ alert ( “width:”+ i.width+” height:” + i.height ); },100);

– gp.

21. Juli 2013 um 17:59 Uhr
Dies ist nur eine Korrektur, die aufgrund der Art von jsfiddle erforderlich ist. Sie können stattdessen onLoad in onDomReady ändern, um das anfängliche Problem mit der Breite und Höhe von 0 zu beheben. Code geht davon aus, dass Sie diese Funktion irgendwo in Ihrer Arbeit aufrufen, wo das Dokument bereits geladen ist.

– Desu

21. Juli 2013 um 18:04 Uhr
Schätze, Ihr Punkt war, dass Sie nichts zu dom hinzufügen müssen, um Breite und Höhe zu erhalten. Wird die Antwort ändern, um Ihre Vorschläge widerzuspiegeln.

– Desu

21. Juli 2013 um 18:14 Uhr

14420500cookie-checkBildbreite und -höhe aus dem Base64-Code in JavaScript abrufen

#Abfrage #base64 #Bild #Javascript #Maße