jquery - Hämta bildens bredd och höjd från Base64-koden i JavaScript

Jag har en Base64-bild kodad som du kan hitta här. Hur kan jag få höjden och bredden på den?

Svar #1

var i = new Image();

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

i.src = imageData;

Svar #2

För synkront bruk, omslut det bara i ett promise så här:

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

då kan du använda await för att få datan i synkron kodningsstil:

var dimensions = await getImageDimensions(file)

Svar #3

Jag upptäckte att användning av .naturalWidth och .naturalHeight gav de bästa resultaten.

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:

  • HTMLImageElement.naturalWidth
  • HTMLImageElement.naturalHeight

Detta stöds endast i moderna webbläsare. NaturalWidth och NaturalHeight i IE

Svar #4

En mer modern lösning är att använda HTMLImageElement.decode() istället för onload-händelsen. decode() returnerar ett löfte och kan därför användas synkront med await.

Asynkron användning:

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

Synkron användning (inuti en asynkron funktion):

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

Relaterade artiklar