8

我们如何将有效的 HTML 字符串传递给 html2canvas？

例如

var html = "<html><head></head><body><p>HI</p></body></html>

在http://html2canvas.hertzen.com/screenshots.html上完成的方式

Html2canvas 真的很棒，但它的文档记录很差。

4

2 回答 2

11

通常 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);
于 2013-04-20T10:12:12.903 回答
8

您可以执行以下操作

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);

在这里查看整个代码：

演示

于 2013-04-20T10:20:03.270 回答