javascript - Puppeteer：将截获的图像请求的 URL 更改为 base64 图像

Question

我需要截取图像.jpg并将.gif它们替换为 base64 图像。然后，base64 图像将在屏幕截图中可见。

下面的代码阻止加载原始图像，但未加载 base64 图像来代替原始图像。

如何将原始图像的 src 替换为 base64 图像？

await page.setRequestInterception(true);

page.on('request', request => {

const resourceUrl = request.url().toLowerCase();
const base64Image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAADwBAMAAACDA6BYAAAAMFBMVEUAAACHh4fExMQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACKW9M+AAAACXBIWXMAAAsTAAALEwEAmpwYAAADM0lEQVR4AezOgQAAAAjAsFK5P2QgbQQbAAAAAAAAAAAAAN7bSlBQUFDw2LXDnLdBGADDgRMYnwB8/0Nurb1XUKVaNg2CtPjHlzjxlEekAaedh5rJz00xK3GkmFmTSJKyH9VlHfD1V81ewuybMLwiSs2iSjjXVgLTG9ASKKc6g6wFMM7VhcAYrtiIH0RL5sDEqXXAMWqHYMhIyawuBDa/bHsfa46QI4VC31kJoJq1+LsIyKa7PLLqpxrOw7jRq4CB8Sw7pqgATN2dFmRxcCmwAYzIAKPehAJdCZRzYLIBeHwC60IgF0wAiz+qbgYILN8JhDcC1YHEnUC1C8B2HzDZ3sBYLUreFqisaucPCXEPkGMA+2lmB2AKkn6ZqHcDni91Re4E0hB8Ngv9ObkLGKSkQ7ul5pVGdudDQtTvDWu7Eag2KAZg6ux3ryQlgNlBSiXvJPeuxfXo35oaLSCDeRvQ0xLn4sW961EL7/R7xd8O2wO0Int/2cRKsi2QaHsCFWDdE5gAHpuGstDtGklts7n5iSeeeOKJJ554Yvfes1z82f3CF4KJin8JtLY70OruQNseKLsD66ZAdtquQF4ltwbmT2DSmBzJmpwBk5/gN9syCZgAGnlciMw6YO6eKt+Lg1aXANP47YtaeAFaKAw6/6jMusWNA4jM4mSEeKHXVep8n2TWQ1LHgTy7cg0gXw5SRzIJWMaJOsd/6wkuWXMgA5jGn8OwT1/qlBvudxV1AH3XE4Y/45zfLEQa29xxPenufcWpAdNJQA7A9GvBOKyIYzjPB4OyicB2AszDlTkEof/kMqx5frPAJbiydMCT7pGyqUC7DmS8CcpmdTPKI3gNaJ9AmQpkabgOlKVAnr3rwLo1sF+5CR6SycDv04wWcWD9VdABKVsKVICsK5k5j0H7AOocoAE8X+qC0y9rmHIrHWxau2X1W7PABmA26thMaxYI+dpu0UcxnJhpviibB/x9w9oAxs2lTrpkFvAPWn42Q12eDJTrL00UjnVRNbvd+v7aKd0sR9rVJd+fAOTl+/KLO7PeUJfe+wD/5/jRHhwTAAAAAAzp33oldmIGAAAAAAAAAAAAAAAAATWgPUYJ011oAAAAAElFTkSuQmCC';

if (request.resourceType() == 'image' && resourceUrl.indexOf('.png') === -1 && 
    resourceUrl.indexOf('.svg') === -1 ||
    resourceUrl.indexOf('.jpg') !== -1 ||
    resourceUrl.indexOf('.jpeg') !== -1 ||
    resourceUrl.indexOf('.gif') !== -1) {

        request.respond({
            status: 200,
            contentType: 'image/jpeg',
            headers: {
            // location: base64Image
            // path: base64Image
            url: base64Image
          },
        });

       return; // prevent calling continue twice

}

request.continue();

});

标签： javascriptnode.jswebdriverpuppeteer

Answer 1

问题

request.respond不能与base64响应一起使用。从文档中引用：

注意不支持对 dataURL 请求的模拟响应。

解决方案

相反，您可以使用需要首先转换base64为二进制表示的缓冲数据来回答：

const base64Data = 'iVBORw0KGgoAAA...'; // ony the base64 data, without "data:image/png;base64,"
const buffer = Buffer.from(base64Data, 'base64');

// ...

request.respond({
    status: 200,
    contentType: 'image/png',
    body: buffer
});