<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML to Image html2canvas</title>
</head>
<body>
<table id="picArea">
<tr><td>這個table內的內容是要儲存成圖檔案的區塊</td></tr>
</table>
<hr />
<input type="button" value="" />
<hr />
<fieldset>
<legend>圖檔</legend>
<div>
</div>
</fieldset>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.js "></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js "></script>
<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<script>
$(":button").click(function() {
html2canvas($("#picArea")[0], {
onrendered: function(canvas) {
var $div = $("fieldset div");
$div.empty();
$("<img />", { src: canvas.toDataURL("image/png") }).appendTo($div);
}
});
});
</script>
</body>
</html>
沒有留言:
張貼留言