<body>
<div id="html-content-holder" style="background-color: #ddd; color: #111; width: 500px;padding-left: 25px; padding-top: 10px;">
<strong>テストです</strong><hr/>
<h3 style="color: #3e4b51;">
HTMLを画像にしてダウンロードできるスクリプトのテスト
</h3>
<p style="color: #3e4b51;">
<b>太文字</b> テキストテキストテキスト </p>
<p style="color: #3e4b51;">
<i>イタリック</i> テキストテキストテキスト
</p>
</div>
<input id="btn-Preview-Image" type="button" value="プレビュー"/>
<a id="btn-Convert-Html2Image" href="#">ダウンロード</a>
<br/>
<h3>プレビュー :</h3>
<div id="previewImage">
</div>
</body>
</html>$(document).ready(function(){
var element = $("#html-content-holder"); // global variable
var getCanvas; // global variable
$("#btn-Preview-Image").on('click', function () {
html2canvas(element, {
onrendered: function (canvas) {
$("#previewImage").append(canvas);
getCanvas = canvas;
}
});
});
$("#btn-Convert-Html2Image").on('click', function () {
var imgageData = getCanvas.toDataURL("image/png");
// Now browser starts downloading it instead of just showing it
var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
$("#btn-Convert-Html2Image").attr("download", "hogehoge.png").attr("href", newData);
});
});
External CSS
This Pen doesn't use any external CSS resources.