使用 html2canvas 捕获基础知识答案

【问题标题】：Capture basics using html2canvas使用 html2canvas 捕获基础知识
【发布时间】：2015-04-10 17:25:19
【问题描述】：

我正在使用 html2canvas。如何捕获 DIV aaa 并将其打印在 DIV tt 内的画布 avatar 中？

<div id="aaa">
    aaaaa<br />
    bbbbb
</div>

<div id="tt"> </div>

js:

html2canvas($('#aaa'), {
        onrendered: function(canvas) {
          var canv = $('<canvas />', { id: "avatar"});
          $('#tt').append(canv);
      var newImg = document.getElementById("avatar");
      newImg.src = canvas.toDataURL();
        }
      });

【问题讨论】：

标签： javascript html canvas html2canvas

【解决方案1】：

试试这个..

在onrendered事件函数中你会得到canvas元素，你只需要把它放在你想要的任何地方。

html2canvas($('#aaa'), {
    onrendered: function(canvas) {
    $(canvas).attr('id','avatar');
    $('#tt').append(canvas);
  }   
});

更多信息请参考这里.. http://html2canvas.hertzen.com/examples.html

【讨论】：

点赞。我们都想出了相同的答案，而您的速度要快一些。您确实需要设置 id='avatarCanvas'
@Beki 我已经编辑了添加 id 的答案，如果正确，请检查并接受答案。

【解决方案2】：

这是一种方法：

https://jsfiddle.net/m1erickson/wtchz972/

<!doctype html>
<html>
<head>
<script src="https://rawgit.com/niklasvh/html2canvas/master/dist/html2canvas.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
    #avatarCanvas{border:1px solid green;}

</style>
<script>
window.onload=(function(){

    var aaaDiv=document.getElementById('aaa');
    var ttDiv=document.getElementById('tt');

    html2canvas(aaaDiv).then(function(canvas) {
        // assign id:avatarCanvas to canvas 
        canvas.id='avatarCanvas';
        // append canvas to ttDiv
        ttDiv.appendChild(canvas);
    });

}); // end $(function(){});
</script>
</head>
<body>
    <h4>This is 'aaa'</h4>
    <div id="aaa">
        aaaaa
        <br>
        bbbbb
    </div> 
    <h4>This is 'tt'</h4>   
    <div id='tt'></div>
</body>
</html>

【讨论】：

这和 Nish 说的差不多，但也设置了 id='avatarCanvas'
在 Nish 上标记这个是正确的，因为分配一个 id 对我来说是必不可少的。谢谢。