可以透過html2canvas這個Javascript的API
透過這個API可以將所選定的HTML標籤畫面內容轉換成Canvas(如，<div>裡面的東西</div>)
使用範例如下
<html>
<head>
<style type="text/css">
div {
height: 100px;
width: 100px;
background-color: #2C7CC3;
}
</style>
<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script language="javascript">
$(document).ready(function() {
//var testdiv = document.getElementById("ourdiv");
//把ourdiv轉為canvas
html2canvas($("#ourdiv"), {
onrendered: function(canvas) {
// canvas is the final rendered <canvas> element
var myImage = canvas.toDataURL("image/png");
window.open(myImage);
}
});
});
</script>
</head>
<body>
<div id="ourdiv">
</div>
</body>
</html>
<head>
<style type="text/css">
div {
height: 100px;
width: 100px;
background-color: #2C7CC3;
}
</style>
<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script language="javascript">
$(document).ready(function() {
//var testdiv = document.getElementById("ourdiv");
//把ourdiv轉為canvas
html2canvas($("#ourdiv"), {
onrendered: function(canvas) {
// canvas is the final rendered <canvas> element
var myImage = canvas.toDataURL("image/png");
window.open(myImage);
}
});
});
</script>
</head>
<body>
<div id="ourdiv">
</div>
</body>
</html>