Question

我有以下代码从抓取工具中抓取结果图像的尺寸，并根据高度/宽度的划分结果生成一个用作图像宽高比的值。然后我将此值插入查询字符串url: urlLocation + imageid.value + "/orientation/" + orientation + "/image/" + saveImage,。问题在于找到图像比率的逻辑操作不正确，并且看到所有图像都被裁剪（无论它们是方形（高度=宽度），纵向还是横向）为“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>");
                  }
              });
            });

Answer 1

您的代码包含很多对您项目的引用，因此我无法对其进行真正的测试但是，如果我找到一个可能的原因，我会说你正在测试precision的相等性。

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

console.log(0.1 + 0.2 == 0.3)

问题是你首先使用.toFixed()来（正确地）将float转换为字符串。但是，然后将结果字符串与float进行比较，这意味着JavaScript会将字符串重新转换为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。此外，您可能希望处理方向为空时的情况。

PS

我同意@Manhattan先生对你的问题的评论。通常情况下，您并不需要获得准确的宽高比。只需检查三种情况：

if width > height，它是风景
其他如果 width < height，那就是肖像
else 它是正方形（无需检查else if(width == height)，好像它不是更大也不是必须相等）

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

1 个答案:

PS