HTML2Canvas截取外部网站的屏幕截图

Question

我甚至不知道如何做到这一点，而html2canvas的文档在这个部分并没有提供真正有用的帮助。

使用以下代码片段，我可以截取我的HTML屏幕截图：

target = $('#myDiv');
        html2canvas( target, {
        onrendered: function( canvas ) {
            /* canvas is the actual canvas element, 
               to append it to the page call for example 
             */
               document.body.appendChild( canvas );
            }
        })

但是我希望能够传入一个网址并截取该页面的屏幕截图，就像他们在http://html2canvas.hertzen.com/screenshots.html上的示例页面中所做的那样。

如果有人能给我一个提示如何开始实现这个功能，我会非常高兴。

- movsky

Answer 1

由于安全原因，您不能加载任何外部URL。这就是为什么，正如您链接的页面上所描述的那样，您需要设置一个单独的服务器端脚本来获取页面。然后您可以直接使用该脚本，或通过AJAX使用它，以提供html2canvas的输入。

- DNS

---

我可以像在 PHP 中调用 file_get_contents() 函数来获取页面内容，然后将其输出并在 AJAX 成功回调函数中使用吗？我的理解正确吗？ - movsky

抱歉，我不记得 PHP 的具体语法了。 - DNS

嗯，好的，你能告诉我html2canvas的调用会是什么样子吗？我现在有这样的东西：$.ajax({ type: "POST", url: "ajax.php", data: { action: 'getPageContent', url: 'http://google.de' } }).done(function(html) { // 从这里开始如何使用呢？ }); - movsky

我不确定，这取决于你如何创建你的脚本，但那看起来大致正确。我建议查看一下jQuery AJAX文档。 - DNS