如何从已加载的Playwright页面提取图片且不重复发起请求？

当然可以，页面加载完成后，浏览器已经将图片资源缓存到本地，你完全可以直接从浏览器缓存或DOM中获取图片数据，无需再次向服务器发起请求。以下是具体实现方式：

前端代码实现方案 #

• 通过DOM+Canvas转换导出图片
  获取页面中的<img>元素，借助Canvas将其转换为可下载的图片格式：

  // 定位目标图片元素
  const targetImg = document.querySelector('img.your-image-selector');
  // 创建Canvas并匹配图片尺寸
  const canvas = document.createElement('canvas');
  canvas.width = targetImg.naturalWidth;
  canvas.height = targetImg.naturalHeight;
  // 将图片绘制到Canvas
  const ctx = canvas.getContext('2d');
  ctx.drawImage(targetImg, 0, 0);
  // 生成下载链接并触发下载
  const dataURL = canvas.toDataURL('image/png');
  const downloadLink = document.createElement('a');
  downloadLink.href = dataURL;
  downloadLink.download = 'saved-image.png';
  downloadLink.click();
  

  注意：若图片为跨域资源，需服务器配置CORS允许跨域读取，否则会触发画布污染无法导出。

• 利用浏览器缓存获取Blob数据
  使用fetch请求图片URL时设置强制缓存策略，浏览器会直接从本地缓存读取数据，不会发起新请求：

  fetch(targetImg.src, { cache: 'force-cache' })
    .then(res => res.blob())
    .then(blob => {
      const blobURL = URL.createObjectURL(blob);
      const downloadLink = document.createElement('a');
      downloadLink.href = blobURL;
      downloadLink.download = 'saved-image.png';
      downloadLink.click();
      URL.revokeObjectURL(blobURL);
    });
  

手动操作方案 #

如果不需要代码实现，直接在已加载页面上右键点击目标图片，选择「图片另存为」，浏览器会直接从本地缓存读取图片数据，不会向服务器发送新请求（可通过浏览器开发者工具的Network面板验证，此时无对应图片请求）。

内容的提问来源于stack exchange，提问作者Zach Johnson