Calculate image ratio and apply value to query string

Question

I have the following code that grabs the dimensions of the resulting image from a cropper tool, and based on the result of dividing height/width, generates a value which is used as the image aspect ratio. I then have this value inserted into the query string url: urlLocation + imageid.value + "/orientation/" + orientation + "/image/" + saveImage,. The issue is that the logic to find the image ratio is not operating correctly, and is seeing all images cropped(whether they are square(height = width), portrait or landscape) as "SQUARE".

$submitButton = $('<div class="btn btn-success submit"></div>')
            .text('Submit ' + imageid.value).appendTo($(".submit-well"))
            .on('click', function () {

              //var USERNAME = "bob";
              //var PASSWORD = "bobpass";
              var urlLocation = "http://www.url.com/rest/v1/cms/story/";
              var saveImage = encodeURIComponent(dataUrl);

              //USED IF ORIENTATION HAS TO BE MANUALLY SELECTED
              //var orientation = $("#orientation").val();
              //

              var resultHeight = $("#result").height();
              var resultWidth = $("#result").width();
              var divide = resultHeight / resultWidth;
              var precision = divide.toFixed(1);

              if (precision == 1.77) {
                        orientation = "PORTRAIT";
              } 
              if(precision == 0.56) {
                        orientation = "LANDSCAPE";
              } 
              if(resultHeight === resultWidth){
                        orientation = "SQUARE";
                        console.log(orientation);
              }

              $.ajax({
                  method: "PUT",
                  dataType: 'jsonp',
                  /*headers: {
                      "Authorization": "Basic " + btoa(USERNAME + ":" + PASSWORD)
                    },*/
                  url: urlLocation + imageid.value + "/orientation/" + orientation + "/image/" + saveImage,
                  /*data: {
                    imageid: imageid.value,
                    orientation: orientation,
                    image: saveImage,
                  },*/
                  success: function (data) {
                    $(".share-link").html("<div class='alert alert-success'><p>Success! " + imageid.value +" was posted.</p></div>");
                      console.log(data);
                  },
                  error: function (data) {
                    $(".share-link").html("<div class='alert alert-danger'><p>Couldn't send photo: <b>"+ imageid.value + "</b></p></div>");
                  }
              });
            });

What are the results you're getting for resultHeight and resultWidth? — krillgar
@krillgar - resultHeight and resultWidth give me the value in pixels of the image in the result div. — Matt
Yeah, I understood that is what they're doing, but without any images to test with, figuring out why resultHeight === resultWidth is impossible. Looking at the code in your question, that's the only way that orientation will be assigned to "SQUARE". — krillgar
just out of curiosity, why using the division? resultHeight > resultWidth => PORTRAIT and resultWidth > resultHeight => LANDSCAPE should have the same effect without leaving the possibillity of an empty value... — Mr.Manhattan

ItalyPaleAle ItalyPaleAle · Accepted Answer · 2015-04-17T13:58:23

Your code contains a lot of references to your project so I can't really test it.
However, if I was to find a likely cause, I'd say it's in the lines where you are testing precision for equality.

As you may recall, the golden rule is to never, ever compare two floats for equality. Because of the way floats are stored in memory (in exponential notation), that can lead to unexpected results.
For example, this code will return false:

console.log(0.1 + 0.2 == 0.3)

The problem is that you're first using .toFixed() to (correctly) converting the float to a string. However, you then compare the resulting string with a float, which means that JavaScript will re-convert the string to float, and the comparison between two floats is unreliable.

Thus, replace the lines with:

var precision = divide.toFixed(2);
if (precision == '1.77') {
    orientation = "PORTRAIT";
} 
else if(precision == '0.56') {
    orientation = "LANDSCAPE";
} 
else if(resultHeight === resultWidth){
    orientation = "SQUARE";
}
console.log(orientation);

(I've also used else if instead of more if's. Also, you may want to handle the case when orientation will be empty)

PS

I agree with @Mr.Manhattan's comment to your question. You don't really need to get the exact aspect ratio, normally. Just check the three cases:

if width > height, it's landscape
else if width < height, it's portrait
else it's square (no need to check else if(width == height) as if it's not greater nor lesser it must be equal)

Calculate image ratio and apply value to query string

1 Answers

PS