html2canvasを使って画像をキャプチャする
May 28, 2013,
tags:
javascript
こんばんは。このブログに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でも見てください。