通过画布制作客户端截图

Question

我正在尝试使用 html2canvas 创建网页的屏幕截图。我是 canvas 新手，我认为这就是我无法让 html2canvas.js 库正常工作的原因。

请看，http://jsfiddle.net/cantdutchthis/7sCya/。

javascript，在加载到 html2canvas.js 文件后，运行以下内容；

html2canvas(document.body, {
    onrendered: function (canvas) {
        document.body.appendChild(canvas)
    }
});

正文包含三个对象，一个段落标签，一个带有 uri 源的图像和一个placeholder kitten。

为什么canvas只做段落和uri源的打印屏幕，为什么不是小猫？

Answer 1

这是不允许的，因为 same-origin policy。仅当图像与脚本具有相同的协议和主机时才有效。

使用本地图像查看此更新的fiddle（如果您在第一次加载时没有看到相对图像../../favicon.png，请再次按run）。

您要么需要像html2canvas website 上演示的那样的代理，要么在启动时向浏览器添加一个特殊标志，或者从启用cross-origin resource sharing 的服务器加载图像，如answer 中建议的那样。