使用 html2canvas 捕获基础知识
Capture basics using html2canvas
我正在使用 html2canvas。如何捕获 DIV aaa
并将其打印在 DIV tt
中的 canvas 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();
}
});
试试这个..
在 onrendered 事件函数中你会得到 canvas 元素,只是你需要把它放在你想要的地方。
html2canvas($('#aaa'), {
onrendered: function(canvas) {
$(canvas).attr('id','avatar');
$('#tt').append(canvas);
}
});
请参阅此以获取更多信息..
http://html2canvas.hertzen.com/examples.html
这是一种方法:
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>
我正在使用 html2canvas。如何捕获 DIV aaa
并将其打印在 DIV tt
中的 canvas 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();
}
});
试试这个..
在 onrendered 事件函数中你会得到 canvas 元素,只是你需要把它放在你想要的地方。
html2canvas($('#aaa'), {
onrendered: function(canvas) {
$(canvas).attr('id','avatar');
$('#tt').append(canvas);
}
});
请参阅此以获取更多信息.. http://html2canvas.hertzen.com/examples.html
这是一种方法:
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>