estaba haciendo otra versión de mi proyecto, así que quería mejorar el avatar, ahora estoy tratando de hacer una función para verificar si la imagen es horizontal o vertical (o 1: 1), pero el código regresa que es 1: 1 cuando la imagen es vertical
function vhCheck(URL) { var image = new Image(); image.src = URL; var result = onload = function() { var styleRes = 0; if (image.width > image.height) { return (styleRes = "style='height: 100%; width: auto;'"); } else if (image.width < image.height) { return (styleRes = "style='height: auto; width:100%;'"); } else if (image.width == image.height) { return (styleRes = "style=' height: 100%; width: 100%;'"); } return styleRes; }; return result(); }Editar: pensé que podría ser útil, así que agregué mi salida desde la consola
vhCheck("https://upload.wikimedia.org/wikipedia/commons/0/0f/Eiffel_Tower_Vertical.JPG") >"style=' height: 100%; width: 100%;'"En su código, llama a result() sincrónicamente, mientras que esto debería llamarse cuando la imagen se haya cargado. Cuando se ejecuta de forma asincrónica, se ignora su valor de retorno. Así que return styleRes no va a ninguna parte. Cuando eso se ejecuta, vhCheck ya ha regresado hace mucho tiempo.
O tiene que configurar un sistema de devolución de llamadas o hacerlo con promesas.
Hay otro pequeño error: la configuración de alto/ancho debe ser la inversa: cuando el ancho es el más pequeño, tiene una imagen vertical, por lo que la altura debe ser del 100% (al menos si desea ver la imagen completa, si querías recortar la imagen, está bien como la tienes).
No me preocuparía demasiado por el tercer caso donde la imagen es cuadrada. Cualquiera de las dos opciones servirá entonces.
Finalmente, usaría ese estilo para establecer el atributo de style del objeto de imagen y resolver una promesa con el objeto de imagen que luego recibió ese atributo:
function vhCheck(URL) { return new Promise(function (resolve) { var image = new Image(); image.src = URL; image.onload = result; console.log("loading...", image.src); function result() { console.log("loaded!"); var styleRes = image.width < image.height // or > ? 'height: 100%; width: auto;' : 'height: auto; width:100%;'; image.setAttribute("style", styleRes); resolve(image); }; }); } vhCheck("https://upload.wikimedia.org/wikipedia/commons/0/0f/Eiffel_Tower_Vertical.JPG") .then(function (image) { console.log(image); // do something more with image ... });