如何在网页中获取跨域图像的屏幕截图？

Question

我正在使用html2canvas.js直接在用户浏览器上截取网页的“屏幕截图”。但我发现它没有获得使用跨域引用的图像。 此外，我也无法在服务器上设置跨域权限。

那我怎么能这样做呢？

Answer 1

html2canvas团队没有很好的文档。所以，我不得不做很多研发来解决这个问题因此，我在这里分享这些细节是为了别人的利益。

1. 该插件接受一个参数作为对象，它希望该对象具有属性“proxy”。您需要在此处指定代理服务的/模块名称（具有相对路径）。

2. 使用此值，插件会形成如下网址：https://your.domain.com/yourPath/yourProxyService?url=https%3A%2F%2Fcrossdomain.com%2FImage.png&callback=html2canvas_0

3. 当插件尝试使用新创建的URL访问此代理时，它需要具有JSONP格式的图像的基本64值的数据。例如，见下文：

   html2canvas_0（ “数据：图像/ PNG; BASE64，R0lGODlhQAAwAMQAAKioqICAgLKysm1tbWNjY8bGxpSUlHd3d9nZ2ePj48 / Pz7y8vJ6enoqKillZWY6Nje3t7Q”）

注意：html2canvas_0是网址中“callback”参数的值