我可以在不加载图像的情况下获得图像的 NaturalSize 吗？

Question

我试图在不加载图像的情况下获取图像的 NaturalWidth 和 NaturalHeight，以加快速度。 有没有办法做到这一点？谢谢！

编辑： 有人告诉我分享一些代码，但我真的不知道要分享什么。

这是我用来获取所有图像尺寸的方法：

const images_datas = await this.page.$$eval('img', imgs => {
      var images_data = []
      var empty_images = 0
      imgs.forEach(img => {
        if(img.naturalWidth*img.naturalHeight == 0 || ( img.naturalHeight == 1 && img.naturalWidth == 1)){
          empty_images++
        } else {
          images_data.push({'url': img.src, 'width': img.naturalWidth, 'height' : img.naturalHeight, 'alt' : img.alt})
        }
      });
      return {'images_data': images_data, 'nb_empty_images': empty_images}
} );

还有我用来阻止图片加载的代码。

await page.setRequestInterception(true);
page.on('request', request => {
    if (request.resourceType() === 'image')
      request.abort();
    else
      request.continue();
});

但是这两个代码不能一起工作...

Answer 1

如果您可以控制服务器，则可以将图像的大小作为 HTTP 标头传递。否则只能读取图片大小而不加载。

读取图片大小

以下代码是关于如何在不下载图像的情况下读取图像大小（以字节为单位）的最小示例。它将中止任何图像请求，然后执行HEAD 请求以仅请求文件的标头来读取content-length 标头。请注意，这只返回总文件大小，而不是宽度或高度。

const puppeteer = require('puppeteer');
const fetch = require('node-fetch');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.setRequestInterception(true);

    page.on('request', interceptedRequest => {
        if (interceptedRequest.resourceType() === 'image') {
            interceptedRequest.abort();
            const response = await fetch(interceptedRequest.url(), {
                method: 'HEAD'
            });
            if (response.ok) {
                const sizeOfImage = response.headers.get('content-length');
                // handle image size
            } else {
                // something went wrong...
            }
        } else {
            interceptedRequest.continue();
        }
    });
    await page.goto('...');
    await browser.close();
})();

将图像的大小作为标题传递

如果您可以控制后端/服务器，则可以将图像的大小作为标头传递，并使用与之前给出的相同代码进行读取。只需将标题从content-length 更改为发送宽度和高度的标题。

由于您没有提及后端，我假设这是不可能的。如果您可以控制后端并且使用 Node.js 作为后端，您可能需要阅读有关如何read the image size with Node.js 的问题。

---

如果不加载图像，则无法进行更多操作。如果您不控制服务器，但需要知道图像的naturalHeight 和naturalWidth 属性，则必须加载图像。