Use headless chrome to intercept image request data

Viewed 2768

I have a use case that needs to use Headless Chrome Network (https://chromedevtools.github.io/devtools-protocol/tot/Network/) to intercept all images requests and find out the image size before saving it (basically discard small images such as icons).

However, I am unable to figure out a way to load the image data in memory before saving it. I need to load it in Img object to get width and height. The Network.getResponseBody is taking requestId which I don't have access in Network.requestIntercepted. Also Network.loadingFinished always gives me "0" in encodedDataLength variable. I have no idea why. So my questions are:

  1. How to intercept all responses from jpg/png request and get the image data? Without saving the file via URL string to the disk and load back.

  2. BEST: how to get image dimension from header response? Then I don't have to read the data into memory at all.

My code is below:

const chromeLauncher = require('chrome-launcher');
const CDP = require('chrome-remote-interface');
const file = require('fs');

(async function() {
  async function launchChrome() {
    return await chromeLauncher.launch({
      chromeFlags: [
        '--disable-gpu',
        '--headless'
      ]
    });
  }
  const chrome = await launchChrome();
  const protocol = await CDP({
    port: chrome.port
  });

  const {
    DOM,
    Network,
    Page,
    Emulation,
    Runtime
  } = protocol;
  await Promise.all([Network.enable(), Page.enable(), Runtime.enable(), DOM.enable()]);

  await Network.setRequestInterceptionEnabled({enabled: true});
  Network.requestIntercepted(({interceptionId, request, resourceType}) => {
    if ((request.url.indexOf('.jpg') >= 0) || (request.url.indexOf('.png') >= 0)) {
      console.log(JSON.stringify(request));
      console.log(resourceType);

      if (request.url.indexOf("/unspecified.jpg") >= 0) {
        console.log("FOUND unspecified.jpg");
        console.log(JSON.stringify(interceptionId));
        // console.log(JSON.stringify(Network.getResponseBody(interceptionId)));
      }

    }
    Network.continueInterceptedRequest({interceptionId});
  });

  Network.loadingFinished(({requestId, timestamp, encodedDataLength}) => {
    console.log(requestId);
    console.log(timestamp);
    console.log(encodedDataLength);
  });

  Page.navigate({
    url: 'https://www.yahoo.com/'
  });

  Page.loadEventFired(async() => {
    protocol.close();
    chrome.kill(); 
  });

})();
1 Answers
Related