JS: ottieni la larghezza e l'altezza dell'immagine dal codice base64


Risposte:


147
var i = new Image(); 

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

i.src = imageData; 

semplicemente fantastico, ci vuole metà tempo per controllare le dimensioni, grazie mille!
ampolloso

6
peccato che questo sia un processo asincrono.
Coen Damen

1
@CoenDamen yep. Ho bisogno anche di un processo sincrono.
1,21 gigawatt

Sei fantastico
Valdrinium

12
Aggiungo anche che l'ordine qui è molto importante. Se lo fai al contrario (src prima di onload) potresti perdere l'evento. Vedi: stackoverflow.com/a/2342181/4826740
maxshuty

34

Per un uso sincrono, racchiudilo in una promessa come questa:

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

quindi puoi usare await per ottenere i dati in stile di codifica sincrono:

var dimensions = await getImageDimensions(file)

1
Tuttavia è ancora asincrono. Usando solo zucchero sintattico.
gustavopch

"naturalWidth" e "naturalHeight" sono le scelte migliori no? stackoverflow.com/questions/28167137/...
Crashalot

7

L'ho scoperto usando .naturalWidthe ho .naturalHeightavuto i migliori risultati.

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

Questo è supportato solo nei browser moderni. http://www.jacklmoore.com/notes/naturalwidth-and-naturalheight-in-ie/


2

Crea un nascosto <img>con quell'immagine e poi usa jquery .width () e. altezza()

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

Prova qui: FIDDLE

L'immagine non viene inizialmente creata nascosta. viene creato, quindi ottieni larghezza e altezza e quindi lo rimuovi. Ciò può causare una visibilità molto breve nelle immagini di grandi dimensioni, in questo caso devi avvolgere l'immagine in un altro contenitore e rendere quel contenitore nascosto e non l'immagine stessa.


Un altro violino che non si aggiunge al dom come da risposta di gp.: QUI


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

questa è solo una correzione necessaria a causa della natura di jsfiddle, puoi cambiare onLoad in onDomReady invece per risolvere il problema iniziale di larghezza e altezza 0. Il codice presuppone che tu chiami questa funzione da qualche parte nel tuo lavoro in cui il documento è già caricato.
Desu

Immagino che il tuo punto fosse che non è necessario aggiungere nulla a dom per ottenere larghezza e altezza. Modificherà la risposta per riflettere i tuoi suggerimenti.
Desu
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.