通过输入[Javascript]获取图像的比例

debugcn 发表于 Dev

FoolischEx

我在以下问题上苦苦挣扎了好几个小时：我通过输入字段收到一张图像，需要验证该比率是否在1.90和1.92之间。我需要做的是创建一个Reader，创建一个Image，从加载的图像中获取宽度和高度，并返回true / false。

现在，如前所述，文件需要加载时间，因此我需要某种方式来异步处理它。不幸的是，我是Promises / Asyncs的初学者，因此需要一些主要帮助...

以下部分只是功能链的开始-我检查是否已上传图像（选中了单选按钮。

... 
if (document.editWeb.radio_share[1].checked || document.editWeb.radio_share[2].checked) {
        let promise = processFile();
        promise.then(function(data){
            if (!data){return false;}
        });
}
...

我的processFile函数。对于我的理解，这返回了一个Promise，这就是为什么我尝试在上端代码中截取该Promise并为获取的“数据”返回false的原因。

async function processFile(){
    try {
        let contentBuffer = await getReader();
        return new Promise((resolve, reject) => {
            let img = new Image;
            img.onload = () => {
            let ratio = img.width / img.height;
                if (ratio > 1.92 ||ratio < 1.90 ){
                    resolve(false);
                }else {
                    resolve(true);
                }

            };

            console.log(contentBuffer);
        })

    } catch(err) {
        console.log(err);
    }

}

让我获得读者的功能。

function getReader() {
    let x = document.getElementById("share_file").files[0];

    return new Promise((resolve, reject) => {
        let reader = new FileReader();
        reader.onload = () => {
            resolve(reader.result);
        };

        reader.onerror = reject;

        reader.readAsDataURL(x);
    })

后续：所有这些都称为

<input id="saveAndStay" type="submit" name="buttonSaveAndStay" onclick="return checkRequirements(lang , data")>

之后我们有了

function checkRequirements(lang , data) {
...
if (document.editWeb.radio_share[1].checked === true || document.editWeb.radio_share[2].checked) {
        let promise = processFile();
        promise.then(function(data){
            if (!data){return false;}
        });
    }
}

}

需要注意的重要一点是，如果数据返回false-checkRequirements也应该返回false，以便停止将请求发送到服务器，而是用“此图像的比率错误”警告用户。

我希望这可以清除一切。

布莱克斯

您忘记了该processFile功能中最重要的部分：）

img.src = contentBuffer;

工作演示：

var fileInput = document.getElementById("share_file");

fileInput.addEventListener('change', function() {
  if ("some boxes are checked blah blah") {
    processFile()
      .then(ok => {
        if (!ok) {
          alert("The ratio needs to be between 1.90 and 1.92");
        } else {
          alert("Everything ok!");
        }
      });
  }
});

function processFile() {
  return getReader()
    .then(dataUrl => {
      return new Promise((resolve, reject) => {
        const img = new Image;
        img.onload = () => {
          let ratio = img.width / img.height;
          resolve(ratio <= 1.92 && ratio >= 1.90);
        };
        img.onerror = reject;
        img.src = dataUrl;
      });
    }).catch(err => {
      console.error(err);
      return false;
    });
}

function getReader() {
  const x = fileInput.files[0];

  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = (e) => resolve(e.target.result);
    reader.onerror = reject;
    reader.readAsDataURL(x);
  })
}

<input type='file' id="share_file" />
<p>Demo files you can try uploading:</p>
<img src="https://i.imgur.com/O4tveTG.jpg" />
<img src="https://i.imgur.com/pMavCF8.jpg" />

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。