使用html2canvas-proxy跨域截图遇难题：仅图片URL有效

我明白你遇到的问题了——你以为这个代理可以直接传入任意网页URL返回截图，但实际上它的设计目的并不是直接渲染网页成图片，而是帮html2canvas加载页面中的跨域图片资源，这就是为什么只有像https://placebear.com/200/300这样的图片URL能正常工作，传入https://google.com这类网页URL就只会显示alt文本。

问题根源 #

看代理的server.js里的blob处理逻辑：它只是直接获取目标URL的原始内容，把它转成Base64返回。如果目标是图片，返回的Base64是图片格式，浏览器能识别成图片；但如果目标是网页，返回的是HTML文本的Base64，浏览器把它当作图片源的话，自然解析失败，只能显示alt。

正确的使用方式（针对页面内跨域图片） #

如果你是想在自己的页面中用html2canvas渲染包含跨域图片的内容，正确的步骤是：

• 启动html2canvas-proxy-nodejs代理服务
• 在前端调用html2canvas时，配置useCORS: true和proxy选项指向你的代理地址：

html2canvas(document.body, {
  useCORS: true,
  proxy: 'http://localhost:xxxx' // 替换成你的代理服务端口
}).then(canvas => {
  // 这里处理生成的canvas，比如转成图片显示或者保存
});

这样html2canvas会自动通过代理去加载页面中的跨域图片，而不是需要你手动把网页URL传给代理。

如果需要直接截图任意网页 #

如果你的需求是直接传入网页URL就能返回截图，那html2canvas-proxy-nodejs并不适合这个场景，你需要用专门的网页截图工具，比如：

• Puppeteer：基于Headless Chrome的Node.js工具，可以直接渲染网页并生成截图，功能很完善
• Playwright：类似Puppeteer，支持Chrome、Firefox、Safari等多种浏览器

给你一个Puppeteer的简单示例，用来生成网页的Base64截图：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://google.com'); // 替换成你要截图的网页URL
  const screenshotBuffer = await page.screenshot();
  // 将截图Buffer转成Base64字符串
  const base64Screenshot = `data:image/png;base64,${screenshotBuffer.toString('base64')}`;
  console.log(base64Screenshot); // 输出Base64截图数据
  await browser.close();
})();

希望这个解释和方案能帮到你！

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