javascript - 计算图像比率并将值应用于查询字符串

Question

我有以下代码，它从裁剪工具中获取生成图像的尺寸，并根据高度/宽度除法的结果生成一个用作图像长宽比的值。然后，我将此值插入到查询字符串 url: urlLocation + imageid.value + "/orientation/"+orientation + "/image/"+ saveImage, 中。问题在于，查找图像比例的逻辑运行不正确，并且将所有图像(无论它们是正方形(高度 = 宽度)、纵向还是横向)视为“正方形”。

$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>");
                  }
              });
            });

Answer 1

您的代码包含对您的项目的大量引用，因此我无法真正对其进行测试。
但是，如果我要找到可能的原因，我会说它位于您正在测试的行中 precision为了平等。

您可能还记得，黄金法则是永远不要比较两个 float 是否相等。由于 float 在内存中的存储方式(以指数表示法)，这可能会导致意外的结果。
例如，此代码将返回 false :

console.log(0.1 + 0.2 == 0.3)

问题是您首先使用 .toFixed() (正确地)将 float 转换为字符串。但是，您随后将结果字符串与 float 进行比较，这意味着 JavaScript 会将字符串重新转换为 float ，并且两个 float 之间的比较是不可靠的。

因此，将这些行替换为:

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);

(我还使用了 else if 而不是更多 if 。此外，您可能需要处理方向为空时的情况)

附注

我同意@Mr.Manhattan 对你的问题的评论。通常，您实际上并不需要获得确切的纵横比。只需检查三种情况即可:

• 如果 width > height ，这是风景
• 否则如果 width < height ，这是肖像
• 否则它是正方形(无需检查else if(width == height)，就好像它不大于也不小于，它必须相等)