javascript - tamaño - obtener ancho y alto de una imagen jquery

JS: obtenga el ancho y alto de la imagen desde el código base64

Question

Tengo un base64 img encoded que puedes encontrar here . ¿Cómo puedo obtener la altura y el ancho de la misma?

Answer 1

Cree un <img> oculto 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 quitas. Esto puede causar una visibilidad muy corta en imágenes grandes; en este caso, debe envolver la imagen en otro contenedor y ocultar ese contenedor, no la imagen misma.

Otro violín que no se agrega al dom según el anser de gp. HERE

Answer 2

Descubrí que usar .naturalWidth y .naturalHeight tenía los mejores resultados.

var img = new Image();

img.onload = function() {
    var imgWidth = img.naturalWidth,
        imgHeight = img.naturalHeight;
};

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

Answer 3

Para el 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 un estilo de codificación sincrónico:

var dimensions = await getImageDimensions(file)

Answer 4

var i = new Image(); 

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

i.src = imageData;