1. 首頁
  2. 問答
  3. html2canvas基本信息

html2canvas基本信息

2012-10-31 65 views
0 
<html> 

    <head> 
    <title>test</title> 
    <script src="external/jquery-1.6.2.js"></script> 
    <script type="text/javascript" src="js/html2canvas.js"></script> 

    <script type="text/javascript"> 
    $(document).ready(function() { 
    $('body').html2canvas(); 
    var queue = html2canvas.Parse(); 
    var canvas = html2canvas.Renderer(queue,{elements:{length:1}}); 
    var img = canvas.toDataURL() 
    window.open(img); 
}); 
    </script> 
    </head> 

    <body>   
    <h1>Testing</h1> 
    <img src='http://localhost:8080/test/images/1.jpg'> 
    </body> 
    </html>

我不應該看到一個新窗口打開與此網頁作爲圖像？我錯過了什麼？html2canvas基本信息

來源

2012-10-31 Chris

+0

什麼* *是你看見了什麼？ – alex

+0

對不起... html頁面加載正常。雖然將網頁作爲圖像，但沒有新的窗口打開。 – Chris

回答

8

如果您是html2canvas的新手，那麼下面是一些可以幫助您開始的樣板代碼。希望它可以幫助別人。

<html> 
<head> 
<meta charset="utf-8"/> 
<title>test2</title> 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script> 
<script type="text/javascript" src="html2canvas.js"></script> 


<script type="text/javascript"> 
$(document).ready(function() { 
var target = $('body'); 
html2canvas(target, { 
    onrendered: function(canvas) { 
    var data = canvas.toDataURL(); 
    alert(data); 
    // data is the Base64-encoded image 
    } 
}); 
}); 
</script>  

</head> 
<body> 
<h1>Testing</h1> 
<h4>One column:</h4> 
<table border="1"> 
<tr> 
    <td>100</td> 
</tr> 
</table> 

</body> 
</html>

注 - 我正在使用v0.34。

然後，您可以使用toDataUrl()作爲另一個HTML網頁一個src標籤（或任何你想從這裏做）：

<html> 
<head> 
<meta charset="utf-8"/> 
<title>TEST toDataUrl() DATA FROM PREVIOUS CODE PAGE</title> 
</head> 
<body> 
<h1>Testing html2canvas</h1> 
<img src='data:image/png;base64,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AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAuiP8BiMheRhil3yMAAAAASUVORK5CYII='> 
</body> 
</html>

來源

2012-10-31 19:14:54 Chris

1

嘗試將腳本放入$(document).ready()塊。腳本可能在文檔的其餘部分準備好之前運行。

來源

2012-10-31 01:28:38

+0

沒什麼不同。我是否正確理解此代碼的用途，是否將HTML2canvas腳本調用到您的網頁中，並且能夠通過畫布從DOM構建圖像？ – Chris

相關問題

 相關問題