html2canvasを使って画像をキャプチャする

Tweet

こんばんは。このブログにabで負荷テストしてたらうっかりadsense消すのを忘れて、アボセンスされた僕です。
さてさて、今日は皆様に超便利なhtmlキャプチャライブラリをご紹介しようと思います。

html2canvas
こいつを使えば簡単にサイトの画像をキャプチャーできてしまうわけです。

でキャプチャするときにcanvas or svgとし出力できるんですが、svgは重い・・・。
僕のクロームだとなぜかエラーで落ちたりも。。。
で、やっぱりcanvasよりもjpgとかpngがいいわけですよ。

webサイトを簡単にjpgとかpngでキャプチャを出来たらものすごく便利じゃないですか。
もちろんこのhtml2canvasを使えば簡単にできてしまうんです。

html2canvas(document.body,{
  onrendered: function(canvas) {
    var dataURI = canvas.toDataURL('image/png');
    $('img').attr('src',dataURI);
  }
});

ね、簡単に画像として保存できちゃうでしょ？
ただ、もっと簡単に画像にキャプチャできたら便利じゃないかなぁーと思って実装してみました！
というかForkしてちょっと変更しただけですがw

html2image
使い方とかはリポジトリのexamplesでも見てください。