html2canvas教程？

Question

我想使用html2canvas，但我不知道如何。

Hertzen沒有冒犯他，他做了一個很棒的腳本，但文檔不完整，所以沒用。

我看了一下JSFeedback，但是整個腳本（我不得不從HTML源代碼中「偷」）只能使用他的html2canvas版本，在評論中他說這個版本對於開源而言是不準備的。

任何幫助將真正感激 - Apparatix。

Answer 1

html2canvas基本上把你指定的DOM對象中的所有東西 - 所有的子元素和他們的子元素等 - 並根據它們的各種特性將它們複製到一個Canvas對象中（在傳遞給函數的canvas變量中）包括邊界，內容，風格，等等canvas.toDataURL（）的畫布的內容轉換爲表示可以用來在標記中一個src的圖像字符流，即

<img src=imgdataurl> 

或設定通過javascript/jquery的背景圖像，像這樣 -

$('#someDiv').css('background-image','url('+imgdataurl+')') 

如果它不適合你，它可能是你指定一個不正確的父DOM元素 - 你可以嘗試$（'body'）而不是$（'＃myObj'），看看是否有任何東西出現。

Answer 2

這給一掄 -

在您的index.html，添加以下JavaScript文件：

<script type="text/javascript" language="javascript" src="js/jquery.js"> 
</script> 
<script type="text/javascript" language="javascript" src="js/html2canvas.min.js"> 
</script> 
<script type="text/javascript" language="javascript" src="js/jquery.plugin.html2canvas.js"> 
</script> 

您可以從下載的最後兩個： https://github.com/downloads/niklasvh/html2canvas/v0.34.zip

在你的JavaScript ，那麼你可以編碼（用有效的JQuery選擇器替換#myObjectId）：

$('#myObjectID').html2canvas({ 
    onrendered : function(canvas) { 
    var img = canvas.toDataURL(); 
    // img now contains an IMG URL, you can do various things with it, but most simply: 
     $('<img>',{src:img}).appendTo($('body')); 
      } 
     });