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; 

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)

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/


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Í


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
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.