i was doing another version of my project so i wanted to make avatar better, im trying right now to make a function to check either the image is horizontal or vertical (or 1:1) but the code is returning that it is 1:1 when the image is 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();
}
Edit: i thought that might be helpful so i added my output from console
vhCheck("https://upload.wikimedia.org/wikipedia/commons/0/0f/Eiffel_Tower_Vertical.JPG")
>"style=' height: 100%; width: 100%;'"
In your code you call result() synchronously, while this should be called when the image has loaded. When it does get executed asynchronously, its return value is ignored. So return styleRes is going nowhere. When that executes, vhCheck has already long returned.
Either you have to set up a callback system, or do it with promises.
There is another little mistake: the height/width setting should be the inverse: when the width is the smallest you have a vertical image, and so the height should be 100% (at least if you want to see the whole image -- if you wanted to clip the image, it is fine as you have it).
I wouldn't worry too much about the third case where the image is square. Either of the two options will do then.
Finally, I'd use that style to set the style attribute of the image object, and resolve a promise with the image object that then has received that attribute:
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 ...
});