html2canvasを使ってみた感想メモ

こういうやつです。画面を縮小表示して、現在位置を四角い枠で表示したり、その四角い枠を動かすことで表示位置を動かすことができます。

とりあえず、縮小表示を作る必要があります。すごく簡易に作ってしまう方法（pなどをただの四角として表示する）や、HTMLをクローンしてCSSのTransformで全要素を縮小表示する方法、実際の見た目を画像のように表示する方法があるのですが、見た目を画像のように表示する方法が見た目や、余計な文字を作らない（ページ内検索の邪魔をしない）意味で理想なので、とりあえずそれに挑戦しました。

とりあえず、CanvasにDOMオブジェクトを描画する方法がmozillaのページにあったので参考にしてみたのですが、単純なものなら表示できるものの、複雑な、実際のページを食わせるとどういうわけか失敗し、描画してくれなくなってしまったのでやめました。

続いてhtml2canvasというライブラリを見つけたので、それを試してみました。

たしかに簡単に縮小表示を生成してくれたのですが、とにかく表示が崩れてしまいました。激しく崩れるというほどではないのですが、文字が右端で折り返されずに突き抜けてしまう現象が多発（全てではない）していたのが致命的でした。

CSSのすべての機能に対応しているわけではない、というところにおもいっきり引っかかってしまったのかもしれません。他にもCSSが上手く働かずに表示できていない場所はあったものの、そちらは許容範囲でした。しかし、文字が折り返されないのは、ちょっと許容できませんでした。

ウェブページに対してminimap的なものを作っていたり、HTMLの画面キャプチャをcanvasに描画する、という方法が紹介されているページやライブラリはいくらかあるのですが、どれもそのサンプルが単純なHTML+CSS(style属性に直接)すぎて、実用を考えたらそんなにうまくいくものじゃないんだな、と思う結果になりました。他の方法を考えたほうが良さそうに感じました。