JavsScriptを使って、スクリーンショット及びファイル保存を行う方法について、調べてみました。
以下まとめておきます。
1、html2canvas
html2canvasをつかって、画面キャプチャ及び、キャプチャした画面をダウンロードする
サンプルをつくってみました。
まず、次のサイトからhtml2canvas.jsを取得します。
https://github.com/niklasvh/html2canvas/releases
(1) HTML
スクリーンショットのimgをクリックしたら、プレビューダイアログを表示して、キャプチャした画面を表示して、ダウンロードの<a>タグを表示して、クリックしたら、ファイル保存するHTML
ファイルのサンプルです。
※svgをHTML内で使うときは、html2canvas.svg.jsも定義してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<script src="scripts/html2canvas.js"></script>
<script src="scripts/html2canvas.svg.js"></script>
<script src="scripts/create_image.js"></script>
</head>
<body id="id_body">
<div id="dv_color_set">
<img id="img-printer" src="images/camera.png" title="スクリーンショット" onclick="OnPrintPreview()"/>
</div>
<div id="print_preview">
<img id="screen_image" style="width:400px;height:400px;margin-top:0px;margin-left:50px">
<a id="download" href="#" download="test.png"></a>
<button id="print_preview-cancel">Cancel</button>
</div>
</body>
</html>
(2) JavaScript
スクリプト(create_image.js)では、imgクリック時に関数(OnPrintPreview)を定義します。
OnPrintPreviewで、キャプチャ関数(screenshot）を実行します。
screenshotでhtml2canvasを使って画面キャプチャします。
function OnPrintPreview() {
erase_screenshot("#id_body");
screenshot("#id_body");
};
function screenshot(selector) {
var element = $(selector)[0];
html2canvas(element, {
onrendered: function (canvas) {
var imgData = canvas.toDataURL();
$('#screen_image')[0].src = imgData;
$('#download')[0].href = imgData;
$('#download')[0].innerHTML = "Download";
}
});
}
function erase_screenshot() {
$('#screen_image')[0].src = "";
$('#download')[0].href = "#";
$('#download')[0].innerHTML = "";
}
※Downloadクリック時のイメージファイル保存は、IEではできませんでした（Chrome/Firefoxは可能でした）
２、jsPDF
まず、次のサイトからjspdf.jsを取得します。
https://parall.ax/products/jspdf
ライブラリ(jspdf.js)を使って画面キャプチャしたものをPDFファイルに保存させます。
HTML内で、script定義します。
スクリプト内関数screenshotを次のように変更します。
※ただし、jspdf.jsでは、addImage関数がないとエラーがでたので、jspdf.debug.jsを使用します。
また、jspdf.min.jsをつかうと、エラーとはならないのですが、PDF保存できませんでした。
<script src="scripts/jspdf/jspdf.debug.js"></script>
<!--<script src="scripts/jspdf/jspdf.js"></script>-->
<!--<script src="scripts/jspdf/jspdf.min.js"></script>-->
function screenshot(selector) {
var element = $(selector)[0];
html2canvas(element, {
onrendered: function (canvas) {
var canvasImage = canvas.toDataURL("image/jpeg");
var pdf = new jsPDF();
pdf.addImage(canvasImage, 'JPEG', 0, 0, 210, 210);
pdf.save('C:\TEMP/sample.pdf');
}
});
}
【参考URL】
https://html2canvas.hertzen.com/ (英語)
http://bitwave.showcase-tv.com/html2canvas%e3%81%a7web%e3%83%9a%e3%83%bc%e3%82%b8%e3%81%ae%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88%e3%82%92%e5%8f%96%e3%82%8d%e3%81%861/
http://www.petitmonte.com/javascript/html2canvas.html
http://zentoo.hatenablog.com/entry/2014/02/11/161456
http://blog.k-kansei.com/?p=1319
0 件のコメント:
コメントを投稿