いろんなサイトの文字を崩壊させる

いろんなサイトの文字をマウスオーバーで崩壊させる事ができるブックマークレットを作成して見ました。

下記の「ブックマークレット」というリンクをブックマークに追加して、いろんなサイトで実行してみよう！

いろんなサイトで実行してみる

Yahoo!JAPANで寺門ジモンさんのニュース記事本文にマウスオーバー！

GIGAZINEで子猫DJの記事にマウスオーバー！

ITMediaでステマの記事にマウスオーバー！

きゃりーぱみゅぱみゅのブログでもマウスオーバー！

注意

Chrome・Firefox・IE9で動きます。IE9の場合でも、ページにX-UA-Compatibleが指定されていれば動かないかもしれません。

なお、当ブログ（はてなダイアリー）ではエラーが発生してしまい動きません（prototype.jsが原因？）。

実装について

このブックマークレットはすべてjsで実装してあります。
ブックマークレットを実行するページのpタグとdivタグを取得して、その中のテキスト要素を1文字ずつcanvasタグに変換しています。canvasに変換する際にはdocument.defaultView.getComputedStyle()でfontSizeとfontFamilyを取得して、なるべく見た目が変換前に近くなるようにしています。さらにfontFamilyにはプロポーショナルフォントが指定されている事も考慮してmeasureText()でcanvasサイズを変更しています。
また、ページによっては文字数が多くてブラウザが固まってしまうケースがあるのでブックマークレット実行後5秒間経過したら処理を中断するようにしています。

圧縮前のソースはこちらです。