JS: obtenga el ancho y la altura de la imagen del código base64

Respuestas:

148
var i = new Image(); 

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

i.src = imageData; 
gp.
fuente
simplemente increíble, toma medio tiempo verificar el tamaño, ¡muchas gracias!
grandilocuente
6
Lástima que este sea un proceso asincrónico.
Coen Damen
1
@CoenDamen sí. También necesito un proceso sincrónico.
1,21 gigavatios
Eres increíble
Valdrinium
12
También agregaría que el orden aquí es muy importante. Si hace esto al revés (src antes de onload) puede perderse el evento. Ver: stackoverflow.com/a/2342181/4826740
maxshuty
34

Para uso sincrónico, simplemente envuélvalo en una promesa como esta:

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

luego puede usar await para obtener los datos en estilo de codificación síncrona:

var dimensions = await getImageDimensions(file)
EscapeNetscape
fuente
1
Sin embargo, sigue siendo asincrónico. Solo usando azúcar sintáctica.
gustavopch
'naturalWidth' y 'naturalHeight' son las mejores opciones, ¿no? stackoverflow.com/questions/28167137/…
Crashalot
7

Descubrí que el uso .naturalWidthy obtuve .naturalHeightlos mejores resultados.

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

Esto solo es compatible con los navegadores modernos. http://www.jacklmoore.com/notes/naturalwidth-and-naturalheight-in-ie/

Bill Keller
fuente
2

Cree un hidden <img>con esa imagen y luego use jquery .width () y. altura()

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

Prueba aquí: FIDDLE

La imagen no se crea inicialmente oculta. se crea, luego obtienes ancho y alto y luego lo eliminas. Esto puede causar una visibilidad muy corta en imágenes grandes, en este caso, debe envolver la imagen en otro contenedor y hacer que ese contenedor esté oculto, no la imagen en sí.


Otro violín que no se suma a dom según la respuesta de gp.: AQUÍ

Desu
fuente
var i = nueva imagen (); i.src = imageData; setTimeout (function () {alert ("ancho:" + i.width + "alto:" + i.height);}, 100);
gp.
esto es solo una solución necesaria debido a la naturaleza del jsfiddle, puede cambiar onLoad a onDomReady en su lugar para solucionar ese problema inicial de ancho y alto 0. El código asume que llama a esta función en algún lugar de su trabajo donde el documento ya está cargado.
Desu
Supongo que tu punto es que no necesitas agregar nada a dom para obtener ancho y alto. Modificará la respuesta para reflejar sus sugerencias.
Desu