Основы html2canvas

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

Разве я не вижу новое окно, открытое с этой веб-страницей в виде изображения? Чего мне не хватает?

 Chris31 окт. 2012 г., 02:26
Извините ... HTML-страница загружается нормально. После этого не открывается новое окно с веб-страницей в виде изображения.
 alex31 окт. 2012 г., 02:25
какаянаходятся ты видишь?

Ответы на вопрос(2)

$(document).ready() блок. Сценарий может быть запущен до того, как остальная часть документа будет готова.

 Chris31 окт. 2012 г., 02:36
Ничего особенного Правильно ли я понимаю назначение этого кода, вы запекаете вызов html2canvas-скрипта на своей веб-странице, и он может создать изображение из DOM через canvas?
Решение Вопроса

как я, ниже приведен примерный код для начала работы. Надеюсь, это поможет кому-то еще.

<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 () как тег src на другой html-странице (или что вы хотите сделать здесь):

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

Ваш ответ на вопрос