我們如何將有效的HTML字符串傳遞到html2canvas？Html2Canvas中的HTML字符串

e.g

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

它是在http://html2canvas.hertzen.com/screenshots.html

Html2canvas做的方式是真正偉大的，所有，但它的記錄非常糟糕。

來源

2013-04-20 Manak Kapoor

你可以做以下

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

看到整個代碼here：

DEMO

來源

2013-04-20 10:20:03

我更新了這個DEMO li nk今天，因爲CDN htm2canvas.js變成down ..所以我爲html2canvas.js添加anthoer鏈接 – 2016-08-04 17:14:29

你有什麼想法，如果我不會把html放在文檔中（甚至隱藏），我該怎麼辦？ – 2017-11-20 11:40:12

通常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-20 10:12:12 tessi

Html2Canvas中的HTML字符串

回答

DEMO

相關問題