javascript naturalWidth和naturalHeight返回0

y1aodyip 于 2023-09-29 发布在 Java

关注(0)|答案(2)|浏览(127)

我有一个代码可以检查图像的比例。它的工作9出10倍，甚至更多，但在一段时间内，它不工作，因为img.naturalWidth和img.naturalHeight返回0。我可以理解，图像是不是在那一刻加载时，我试图获取图像的高度和宽度，但我不知道为什么它很少发生。代码也在reader.onload中，这是我在大多数在线文章中找到的解决方案。

isValidFileRatio(selectedFile: Blob, width: number, height: number): any {
return new Promise((resolve, reject) => {
  const reader = new FileReader();

  const img = new Image();
  img.src = window.URL.createObjectURL(selectedFile);

  reader.readAsDataURL(selectedFile);
  reader.onload = () => {
    const ratio = img.naturalWidth / img.naturalHeight;
    
    resolve(ratio >= 1 && ratio <= 2);
  };
  reader.onerror = (error) => reject(error);
});

}
任何解决方案或建议赞赏。谢谢

JavaScript

来源：https://stackoverflow.com/questions/77183503/naturalwidth-and-naturalheight-returns-0

2条答案

按热度按时间

bpsygsoo1#

我认为new FileReader()是无用的，它导致了这个bug。像这样修改你的代码：

isValidFileRatio(selectedFile: Blob, width: number, height: number): any {
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.src = window.URL.createObjectURL(selectedFile);
        
        img.onload = () => {
            const ratio = img.naturalWidth / img.naturalHeight;

            resolve(ratio >= 1 && ratio <= 2);
        };
        img.onerror = (error) => reject(error);
    });

赞(0）回复(0）举报 2023-09-29

mpgws1up2#

问题是您使用的是filereader.onload而不是image.onload
我会这样解决：
我会使用createImageBitmap，而不是使用FileReader，Image或Canvas，这将需要混合回调和承诺。
我也倾向于在可能的情况下通过使我自己的大部分代码同步来打破promise链。这样我自己函数就不会变成async b/c，其他的也是async。

/**
 * @param {{ width: number, height: number }} image
 */
function isValidFileRatio (image) {
  const ratio = image.width / image.height
  return ratio >= 1 && ratio <= 2
}

// Just to get a simple dummy image/png blob for demo
var blob = new OffscreenCanvas(300, 200).getContext('2d').canvas.convertToBlob()

blob
  .then(createImageBitmap)
  .then(isValidFileRatio)
  .then(console.log)

赞(0）回复(0）举报 2023-09-29

我来回答

javascript naturalWidth和naturalHeight返回0

2条答案

相关问题

热门标签

最新问答