Html2Canvasでwebページのスクリーンショットを取ろう(3) 【Canvasデータをサーバに送信して云々編】

Html2Canvasでwebページのスクリーンショットを取ろう(3) 【Canvasデータをサーバに送信して云々編】

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

どうも、さむらいです。
周囲では体調を崩してる人が多いです。近寄らないようにしたいと思います。

キャンバスにページをレンダリング

html2canvasの使い方はとっても簡単です。html2canvas.jsをページに読み込めたら、ブックマークレットからそのまま以下の関数で実行します。

引数にはdocument.bodyと、コールバック関数を渡します。

コールバック関数にはcanvasエレメントを渡しているので、そのエレメントをページに直接埋め込むときは上記の記述でよいです。
※実際に実行すると、この処理を行ったページがもう一度繰り返されているように見えます。繰り返された側はHTMLではなくcanvasにレンダリングされた画像になってます。

Canvasデータをサーバに送信する

Canvasデータは canvas.toDataUrl() 関数を実行するとBase64エンコードされた画像データが文字列として取得できます。

あとはもうわかりますね?
取得できた文字をそのままサーバに送信して、ファイルに保存すればよいのです。

ということで、送る側はこう。

受け取る側はこう。

これでcanvasに書いたページのキャプチャ画像をサーバに送信し、保存するブックマークレットが完成です。

そしてこうなった

試しにYahooのトップページをキャプチャしてみました。
サーバ上にアップされたファイルは、特定のサイズに縮小して、サーバ側のプログラムで以下のようにサムネイル表示させています。クリックすると、フルサイズで表示するようにしました。

image03

サムネイルをクリックすると下のようになります。

image02

見て分かる通り、画像はほとんど表示されてないですね。

レンダリングはhtml2canvasがやっているので、実情はわかりませんが、多分単純なimgタグじゃない画像はキャプチャできないのかも知れません。広告画像等はプログラムが動作していたり、あるいはCSSでバックグラウンドイメージにしてたりとか。

それと、html2canvasは、一番外側のスクロール範囲は全部取れますが、ブロック内のスクロール範囲は取れません。一部のDOM構造も対応していないようです。
それでも結構再現してくれるので、検証が捗る・・・かな?

ということで、これからこれをいろいろカスタマイズしてみようと思います!
ではまた。

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

【週刊bitWave】(メルマガ)始めました!

登録はこちらからメールアドレスを入力してお申込みください。

ご登録いただいたメールアドレスは 【週刊bitWave】の更新情報の配信にのみ使用します。

個人情報の取扱いに関しては、「プライバシーポリシー」をご確認ください。解除はいつでもこちらから行うことが可能です。

あなたにおすすめ

仮想環境で『Ansible』を使ってサーバ構築... 最近、サーバ構築を実施する必要がありました。 まずは仮想環境を作り、サーバ構築を……と思ったのですが、私はインフラ周りの経験が浅く、色々困ったことが頻出してしまいました。 今回の記事では、私と同じような “サーバ構築ビギナー” ...
「Puppeteer」+「LINE Notify」でサイトの更新時のみ通知を受け取ってみる... 前回の記事では閲覧数向上が期待できそうなキーワードの「Puppeteer」と「LINE Notify」のそれぞれの解説、およびサイトのサムネイルを通知してみるといった試みを実施してみました。 <bitWave関連記事『「Puppeteer...
Vue.jsで社用登録データフォームを作ってみた... 今回は社内用データ登録フォームを作ろうと思い、初めて「Vue.js」を試してみることにしました。 「Vue.js」は使い方、書き方も簡単で、初心者もすぐ活用できるjsだと思いましたので、この場を借りて共有させていただきます。 なお、...
「Puppeteer」+「LINE Notify」でサイトのサムネイルを通知してみる... 今回は記事閲覧数が期待できそうなキーワードを用いて、ブログを書いてみようかと思います。 そのキーワードとは…… 「Puppeteer」と「LINE Notify」。 「Puppeteer」って何? 「LINE Notify」って...