Javascript：在一个请求中获取图像的尺寸和大小

Question

基于此处的其他帖子，我写了这个来获取文件的尺寸和大小    const newImg = new Image();    newImg.onload = () => {      console.log('height ' + newImg.height);      console.log('width ' + newImg.width);      const xhr = new XMLHttpRequest();      xhr.open('GET', 'https://www.google.com/myImage.png', true);      xhr.responseType = 'arraybuffer';      xhr.onreadystatechange = function() {        if (this.readyState === this.DONE) {          console.log('size ' + this.response.byteLength);        }      };      xhr.send(null);   }   newImg.src = 'https://www.google.com/myImage.png';虽然它有效，但我想知道我是否可以将两者合二为一，这意味着只做the或Image onLoadrequestxhr吗？

Answer 1

您可以通过使用Blob和数据 URI来避免第二次网络往返：

fetch('https://cdn.glitch.com/2eddb7d4-12e2-45ae-8d27-738f13fb514a%2FGOPR1017_1586689900523.JPG?v=1587457335788')

.then(r => r.arrayBuffer())

.then(buffer => {

  console.log('Size: ' + buffer.byteLength)

  const blob = new Blob([buffer], {type: 'image/jpeg'})

  const img = new Image()

  img.src = URL.createObjectURL(blob)

  img.onload = function() {

    console.log(img.width, img.height)    

  }

})

请注意，您仍然需要onload回调，因为浏览器需要一些时间来解析图像，但在这种情况下，它不会导致网络往返。

Answer 2

我无法回答你的问题，但我可以给你另一个有用的信息：

图像是一种奇怪的动物，它的行为取决于浏览器、上下文和像素密度。为确保捕捉图像的自然尺寸，请使用：

newImg.naturalHeight;
newImg.naturalWidth;

而不是newImg.widthor newImg.clientWidth。

更多信息：https ://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/naturalHeight

玩得开心！