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

Réponses:

146 
var i = new Image(); 

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

i.src = imageData;
gp.
la 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
la 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
la 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
la 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