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

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

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

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


Yahoo!JAPANで寺門ジモンさんのニュース記事本文にマウスオーバー!
f:id:y_d:20120115004235p:image


GIGAZINEで子猫DJの記事にマウスオーバー!
f:id:y_d:20120115004236p:image


ITMediaでステマの記事にマウスオーバー!
f:id:y_d:20120115004237p:image


きゃりーぱみゅぱみゅのブログでもマウスオーバー!
f:id:y_d:20120115004238p:image

注意

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

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

実装について

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

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