html2canvas-没有iframe的屏幕截图 [英] html2canvas - no screenshot for iframe
问题描述
我有一个任务，需要在我的网页上加载URL (e.g www.yahoo.com)并进行屏幕截图.我正在使用 html2canvas 进行屏幕截图并将其附加到页面正文中.
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 html2canvas for screenshot and appending it to the body of the page.
由URL指定的页面已成功加载到div元素内的iframe中.但是，当我尝试拍摄该屏幕截图时，iframe区域变为空白.
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.
下面是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);
}
});
};
HTML部分在这里:
And the HTML part goes here :
<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 :
我被困住了，不知道为什么会这样.我想要类似于此的东西，它可以加载URL，然后onclick可以给我截图.
I am stuck and don't understand why is this happening. I want something similar to this which can load URL and then onclick can give me screenshot.
推荐答案
此处的问题是您没有正确指向要获取屏幕截图的iframe部分，而是直接指向文档正文
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.
您可以尝试以下方法:
var body = $(iframe).contents().find('body')[0];
html2canvas(body, {
onrendered: function( canvas ) {
$("#content").empty().append(canvas);
},
希望这会有所帮助！
这篇关于html2canvas-没有iframe的屏幕截图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
