Man*_*oor 7 javascript html5 canvas html2canvas
我们如何将有效的HTML字符串传递给html2canvas？
例如
var html = "<html><head></head><body><p>HI</p></body></html>
在http://html2canvas.hertzen.com/screenshots.html上完成它的方式
Html2canvas真的很棒,除了文档记录很差外.
通常html2canvas呈现DOM元素而不是html代码.但是你可以创建一个临时的iFrame,让你的html在iFrame中渲染,然后将生成的DOM提供给html2canvas.
你可以在这个jsfiddle中找到一个例子来玩,或者为了你的方便:
var html_string = "<html><head></head><body><p>HI</p></body></html>";
var iframe=document.createElement('iframe');
document.body.appendChild(iframe);
setTimeout(function(){
var iframedoc=iframe.contentDocument||iframe.contentWindow.document;
iframedoc.body.innerHTML=html_string;
html2canvas(iframedoc.body, {
onrendered: function(canvas) {
document.body.appendChild(canvas);
document.body.removeChild(iframe);
}
});
}, 10);
你可以这样做
var iframe=document.createElement('iframe');
$('body').append($(iframe));
setTimeout(function(){
var iframedoc=iframe.contentDocument||iframe.contentWindow.document;
$('body',$(iframedoc)).html('<html><head></head><body><p>HI</p></body></html>');
html2canvas(iframedoc.body, {
onrendered: function(canvas) {
$('body',$(document)).append(canvas);
$('body',$(document)).remove(iframe);
}
});
}, 10);
在这里查看整个代码:
| 归档时间： |
|
| 查看次数： |
8100 次 |
| 最近记录： |