JS - récupérer la largeur et la hauteur de l'image à partir du code base64

Question

J'ai un img codé en base64 que vous pouvez trouver ici . Comment puis-je obtenir la hauteur et la largeur de celui-ci ?

Answer 1

var i = new Image(); 

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

i.src = imageData;

Answer 2

Pour une utilisation synchrone, il suffit de l'envelopper dans une promesse comme ceci :

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

alors vous pouvez utiliser await pour obtenir les données dans un style de codage synchrone :

var dimensions = await getImageDimensions(file)

Answer 3

J'ai découvert qu'en utilisant .naturalWidth y .naturalHeight a obtenu les meilleurs résultats.

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

Docs :

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/naturalWidth
• https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/naturalHeight

Cette fonction n'est prise en charge que par les navigateurs modernes. http://www.jacklmoore.com/notes/naturalwidth-and-naturalheight-in-ie/

Answer 4

Créez un caché <img> avec cette image et ensuite utiliser jquery .width() et . height()

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

Testez ici : FIDDLE

L'image n'est pas initialement créée cachée. Elle est créée, puis vous obtenez la largeur et la hauteur, puis vous la supprimez. Cela peut entraîner une visibilité très courte pour les grandes images ; dans ce cas, vous devez envelopper l'image dans un autre conteneur et rendre ce conteneur caché, mais pas l'image elle-même.

---

Un autre violon qui ne s'ajoute pas à dom comme par la réponse de gp : ICI

Answer 5

Une solution plus moderne consiste à utiliser HTMLImageElement.decode() au lieu de la onload événement. decode() renvoie une promesse, et peut donc être utilisé de manière synchrone avec await .

Utilisation asynchrone :

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

Utilisation synchrone (à l'intérieur d'une fonction asynchrone) :

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