いろんなサイトの文字を崩壊させる
いろんなサイトの文字をマウスオーバーで崩壊させる事ができるブックマークレットを作成して見ました。
下記の「ブックマークレット」というリンクをブックマークに追加して、いろんなサイトで実行してみよう!
いろんなサイトで実行してみる
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秒間経過したら処理を中断するようにしています。
圧縮前のソースはこちらです。