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

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

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

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

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

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

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

[js] html2canvas(document.body, {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
[/js]

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

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

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

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

ということで、送る側はこう。
[js] //formdataオブジェクトを作成
var form_data = new FormData();
form_data.append(“dataurl” , canvas.toDataURL(‘image/png’));

xmlHttp = new XMLHttpRequest();
xmlHttp.open(“POST”, “//html2canvasの中身を送る先のURL”, false);
xmlHttp.send(form_data);

alert(xmlHttp.responseText);
[/js]

受け取る側はこう。
[js] //ヘッダーにはこれをお忘れなく。
header(‘Access-Control-Allow-Origin: *’);

//データの形式チェック
if(isset($_REQUEST[“dataurl”])){
if(strlen($_REQUEST[“dataurl”])>0 && strpos($_REQUEST[“dataurl”],”data:image/png;base64,”) !== false){

//受け取ったデータを加工
$canvas = $_REQUEST[“dataurl”];

//ここから下は http://am-yu.net/2014/02/04/canvas-pbbs2/ さんからパクってきました(ありがとうございます!)
//ヘッダに「data:image/png;base64,」が付いているので、それは外す
$canvas = preg_replace(“/data:[^,]+,/i”,””,$canvas);

//残りのデータはbase64エンコードされているので、デコードする
$canvas = base64_decode($canvas);

//まだ文字列の状態なので、画像リソース化
$image = imagecreatefromstring($canvas);

//画像として保存(ファイル名は年月日時分秒.png)
$filename = date(‘YmdHis’).”.png”;
imagesavealpha($image, TRUE); // 透明色の有効

//このプログラムの配下にあるimages.フォルダに保存
imagepng($image ,”./images/”.$filename);

mb_send_mail(メールの送り先アドレス’,’from HTML2CANVAS!!’, ‘画像ファイルが保存されているサーバのURL’.$filename);

//ajax送信側に戻す文字列(サンプルでは以下の文字をアラート表示しています)
echo “URLは{画像ファイルが保存されているサーバのURL’.$filename}になりました。”;
}
[/js]

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

そしてこうなった

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

image03

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

image02

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

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

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

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

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

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

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

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

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

あなたにおすすめ