我有一项任务,我需要(e.g www.yahoo.com)
在我的网页上加载一个 URL 并截取屏幕截图。我正在使用html2canvas进行屏幕截图并将其附加到页面的正文中。
URL 指定的页面已成功加载到 div 元素内的 iframe 中。但是当我尝试截屏时,iframe 区域变为空白。
下面是 和 的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部分在这里:
<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>
屏幕截图如下所示:
我被卡住了,不明白为什么会这样。我想要与此类似的东西,它可以加载 URL,然后 onclick 可以给我截图。