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 は html コードではなく DOM 要素をレンダリングします。ただし、一時的な iFrame を作成し、その iFrame で html をレンダリングしてから、生成された 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 に答える