JS - obtenir la largeur et la hauteur de l'image à partir du code base64

91

J'ai une img encodée en base64 que vous pouvez trouver ici . Comment puis-je en connaître la hauteur et la largeur?

— grandiloquent
source

146

var i = new Image(); 

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

i.src = imageData;

— gp.
source

juste génial, il faut la moitié du temps pour vérifier la taille, merci beaucoup!

— ampoulé

5

dommage que ce soit un processus asynchrone.

— Coen Damen

@CoenDamen ouais. J'ai également besoin d'un processus synchrone.

— 1,21 gigawatts

Vous êtes génial

— Valdrinium

12

J'ajouterais également que l'ordre ici est très important. Si vous faites cela dans l'autre sens (src avant le chargement), vous risquez de manquer l'événement. Voir: stackoverflow.com/a/2342181/4826740

— maxshuty

34

Pour une utilisation synchrone, enveloppez-le simplement dans une promesse comme celle-ci:

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)

— ÉchapperNetscape
source

1

C'est toujours asynchrone. Juste en utilisant du sucre syntaxique.

— gustavopch

«naturalWidth» et «naturalHeight» sont les meilleurs choix non? stackoverflow.com/questions/28167137/…

— Crashalot

6

J'ai trouvé cela en utilisant .naturalWidthet j'ai .naturalHeighteu 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);
};

Ceci n'est pris en charge que dans les navigateurs modernes. http://www.jacklmoore.com/notes/naturalwidth-and-naturalheight-in-ie/

— Bill Keller
source

2

Créez un <img>fichier masqué avec cette image, puis utilisez jquery .width () et. la taille()

$("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. il est créé, puis vous obtenez la largeur et la hauteur, puis vous le supprimez. Cela peut entraîner une visibilité très courte dans les grandes images.Dans ce cas, vous devez envelopper l'image dans un autre conteneur et rendre ce conteneur masqué et non l'image elle-même.

Un autre violon qui n'ajoute pas à dom selon l'anser de gp: ICI

— Desu
source

var i = nouvelle image (); i.src = imageData; setTimeout (function () {alert ("width:" + i.width + "height:" + i.height);}, 100);

— gp.

ce n'est qu'un correctif nécessaire en raison de la nature du jsfiddle, vous pouvez remplacer onLoad par onDomReady pour résoudre ce problème initial de largeur et de hauteur 0. Le code suppose que vous appelez cette fonction quelque part dans votre travail où le document est déjà chargé.

— Desu

Je suppose que votre argument était que vous n'avez rien à ajouter à dom pour obtenir la largeur et la hauteur. Modifie la réponse pour refléter vos suggestions.

— Desu