使用html2canvas創建網頁截圖（無法正確初始化）

我正在嘗試使用http://html2canvas.hertzen.com/截取我的網頁截圖。我無法初始化使用canvas元素...使用html2canvas創建網頁截圖（無法正確初始化）

var canvas = $('body').html2canvas();

如果我能得到正確的帆布我會的東西像跟隨

var dataUrl = canvas.toDataURL(); //get's image string 
window.open(dataUrl);    // display image

不幸的是，本細則是非常有限的IMO。 http://html2canvas.hertzen.com/documentation.html。我不認爲我需要，因爲我沒有使用任何動態圖形（但我沒有，甚至越來越遠反正）預加載

我簡直太小白明白，如果這傢伙正在和screen capturing using html2canvas

我成功似乎沒有得到任何遠遠超過這個夥伴.. How to upload a screenshot using html2canvas?

我理想的解決方案將演示如何使用最少的代碼創建屏幕截圖。（複製HTML帆布獲得toDataURL字符串輸出字符串。）

任何有識之士非常感謝=）

來源

2012-05-05 mattyd

你應該使用這種方式：

$('body').html2canvas(); 
var queue = html2canvas.Parse(); 
var canvas = html2canvas.Renderer(queue,{elements:{length:1}}); 
var img = canvas.toDataURL(); 
window.open(img);

我花了幾個小時，以圖它出來了，如何以正確的方式使用它。由於插件的不完整實現，{elements:{length:1}}是必需的，否則您會收到錯誤。

祝你好運！

來源

2012-05-09 23:46:42

我想抓住像「$（」＃myDiv「）。html2canvas（）;」但我一直在獲取整個屏幕。我怎樣才能解決這個問題？ –

元素的位置和大小必須定義爲 –

，您如何定義？ – SuN

您還可以使用以下方式：

var html2obj = html2canvas($('body')); 

var queue = html2obj.parse(); 
var canvas = html2obj.render(queue); 
var img = canvas.toDataURL(); 

window.open(img);

來源

2012-08-30 11:50:46 Aley

如何獲得截圖特定的div內容 – srini

@srini使用另一個選擇器而不是像'var html2obj = html2canvas（$（'＃any'））;' – Aley

這個錯誤：html2obj.parse是不是一個功能 – tuananh

只得到網頁的一部分，你可以使用這種方式：

$('#map').html2canvas({ 
onrendered: function(canvas) { 
    var img = canvas.toDataURL() 
    window.open(img); 
}

來源

2012-10-19 09:08:09

在這種情況下你會如何通過選項？（即如果您想打開日誌記錄或調整超時時間。 – PrivateJoker

這是對我工作。

html2canvas(document.body, { 
    onrendered: function(canvas) { 
    var img = canvas.toDataURL() 
    window.open(img); 
    } 
});

這爲截圖創建了一個新窗口。

我只想在屏幕截圖中顯示我的頁面的一部分，特別是一個容器div。所以，我做了以下內容：

html2canvas($('#myDiv'), { 
    onrendered: function(canvas) { 
    var img = canvas.toDataURL() 
    window.open(img); 
    } 
});

爲人們尋找了同樣的問題，如果上述選項沒有幫助，希望這將。

來源

2013-04-10 15:58:50 ckpepper02

您可以使用以下代碼捕獲截圖並下載屏幕截圖。

HTML按鈕創建

<button class="btn btn-default btn-sm" style="margin:0px 0px -10px 970px; padding:2px 4px 1px 4px" onclick="genScreenshot()"><span class="glyphicon glyphicon-envelope"></span></button> 
<a id="test"></a> 
<div id="box1"></div>

函數定義

<script type="text/javascript">       
function genScreenshot() { 
html2canvas(document.body, { 
    onrendered: function(canvas) { 
    $('#box1').html(""); 

    if (navigator.userAgent.indexOf("MSIE ") > 0 || 
       navigator.userAgent.match(/Trident.*rv\:11\./)) 
     { 
    var blob = canvas.msToBlob(); 
    window.navigator.msSaveBlob(blob,'Test file.png'); 
    } 
    else { 
    $('#test').attr('href', canvas.toDataURL("image/png")); 
    $('#test').attr('download','screenshot.png'); 
    $('#test')[0].click(); 
    } 


    } 
}); 
} 
</script>

注：我創建了一個HTML按鈕，我已經調用的函數。 test是一個屬性，box1是獲取畫布元素。

來源

2016-10-18 06:03:36

使用html2canvas創建網頁截圖（無法正確初始化）

回答

相關問題