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属性，则必须加载图像。

是否可以在不加载图像的情况下获取图像的NaturalSize？

1 个答案:

读取图像的大小

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