javascript html2canvas - iframe 没有截图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18737134/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
html2canvas - no screenshot for iframe
提问by roger_that
I have a task where i need to load a URL (e.g www.yahoo.com), on my webpage, and take screenshot. I am using html2canvasfor screenshot and appending it to the body of the page.
我有一个任务，我需要(e.g www.yahoo.com)在我的网页上加载一个 URL并截取屏幕截图。我正在使用html2canvas进行屏幕截图并将其附加到页面的正文中。
The page specified by the URL is successfully loaded in an iframe inside a div element. But when i try to take screenshot of that, the iframe area comes blank.
URL 指定的页面已成功加载到 div 元素内的 iframe 中。但是当我尝试截图时，iframe 区域变为空白。
Below is the code for previewURLand screenshot.
下面是代码previewURL和screenshot。
//to preview the URL content
function previewUrl(url,target){
//use timeout coz mousehover fires several times
clearTimeout(window.ht);
window.ht = setTimeout(function(){
var div = document.getElementById(target);
div.innerHTML = '<iframe style="width:100%;height:100%;" frameborder="0" src="' + url + '" />';
},20);
}
function pic() {
html2canvas(document.body, {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
};
And the HTML part goes here :
HTML 部分放在这里：
<body>
<input type="button" class="clear-button" onclick="pic();" value="Take Screenshot" >
<a href="http://www.yahoo.com" onmouseover="previewUrl(this.href,'div1')">Hover to load</a>
<div id="div1"></div>
</body>
The screenshot looks something like this :
屏幕截图如下所示：
I am stuck and don't understand why is this happening. I want something similar to thiswhich can load URL and then onclick can give me screenshot.
我被卡住了，不明白为什么会这样。我想类似的东西这其中可以加载URL，然后的onclick可以给我截图。
回答by Mario Madrigal
The problem here is that you are not pointing correctly to the part of the iframe that you want to take the screenshot, instead your are pointing directly to the document body.
这里的问题是您没有正确指向要截取屏幕截图的 iframe 部分，而是直接指向文档正文。
you can try this:
你可以试试这个：
var body = $(iframe).contents().find('body')[0];
html2canvas(body, {
onrendered: function( canvas ) {
$("#content").empty().append(canvas);
},
Hope this helps!
希望这可以帮助！
回答by icl7126
Seems like it's not possible:
似乎不可能：
The script doesn't render plugin content such as Flash or Java applets. It doesn't render iframe content either.
该脚本不会呈现插件内容，例如 Flash 或 Java 小程序。它也不呈现 iframe 内容。
http://html2canvas.hertzen.com/documentation.html#limitations
http://html2canvas.hertzen.com/documentation.html#limitations
