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玩得开心！