# html2canvas 「ブラウザ画面をjavaScriptでキャプチャーできないか？」と相談された案件はいくつかありましたが、そのたび調べては断念してきたように記憶しています。が、いつのまにか「html2canvas」というライブラリで実装できるようになってました。 http://www.chaordic.co.jp/memorandum/user/chaordicdesign/img/28/0001.png 公式ページ https://html2canvas.hertzen.com/ 実装はいたく簡単で、わりと普通に使えるのでかなりうれしくなります。 ただ、ブラウザの画面をそのままをキャプチャしているわけではなく、指定された領域のhtmlとCSSを再レンダリングして画像化する方式であり、また、html/CSSのすべてをカバーしているわけではないので[（詳細）](https://html2canvas.hertzen.com/features)、ブラウザ上とできあがった画像で見栄えが若干違う場合があることは留意しておく必要があります。 # 試してみる 簡単なのでとにかく試してみるのが早いです。指定した要素を画像化して出力する[サンプル](//chaordic.co.jp/memorandum/sample/html2canvas/sample.html)を、まず触ってみてください。 「画像化する」ボタンを押すと、上の要素がコピーされたように見えていると思います。でも下の要素は画像として出力されています。試しにそこをドラックしてデスクトップに保存してみてください。 セッティングは簡単で、ヘッダーで[CDNのhtml2canvas](https://www.jsdelivr.com/package/npm/html2canvas)の最新版を読み込むだけです。現在のバージョンは1.3.2ですね。 そして、html2canvasによるキャプチャのコードは基本的にはこれだけです。要素がデータURL（画像）になっているので、それを出力します。 キャプチャの対象要素を「body」にすれば、当然ブラウザの画面全体がキャプチャの対象となります。 html2canvas(キャプチャの対象要素).then(function(データURL){ データURLの出力処理 }); [サンプル](//chaordic.co.jp/memorandum/sample/html2canvas/sample.html)ではID「#make_canvas」のボタンを押すと、ID「#target」をキャプチャしてID「#result」に出力しています。また、オプションを追加して、ブラウザ画面からはみ出した部分も含めて画像化されるように指定しています。この他に指定できるオプションは[ココ](https://html2canvas.hertzen.com/configuration)を参照してください。 CSSとHTMLは特別なことをしていませんので必要であれば[サンプル](//chaordic.co.jp/memorandum/sample/html2canvas/sample.html)のソースを参照してください。 ##### JavaScript var button = document.getElementById('make_canvas'); button.addEventListener('click', function(){ html2canvas(document.getElementById('target'),{ // オプション width: 650, // 幅を設定 height: 650, // 高さを設定 windowWidth: 650, // html2canvas の幅 }).then(function(canvas){ document.getElementById('result').src = canvas.toDataURL(); }) }); このようにブラウザのキャプチャを作成するだけなら、かなり簡単に実現できるようになりました。しかし、WEBサイトのサービスとしてこの機能を組み込む場合、作成したキャプチャ画像をダウンロードさせたり、データベースに保存して運用するなどの処理が必要になります。そのようなご要望がありましたら、ご相談ください。