表示中のページから塗り絵用の線画を作るブックマークレット

子がたびたび、塗り絵をやりたい、と言う。
塗り絵はだいたい商店街の文房具屋で買ってるのだけど、急に、こういう塗り絵をやりたい、と言われても、そんなのないよ…となることがある。
家にはプリンタがあるので、画像検索して印刷すれば塗って遊べるのだけど、ただモノクロで印刷すると、グレイスケールのもやもやした出力で、塗っても楽しくない。
できれば、線画っぽい、コントラストのぱきっとした画像を出してあげたい。

プレビュー.appで色を調整する

画像をダウンロードして、カラーを調整する。露出を上げて、コントラストをあげて、彩度を下げると、塗り絵用の線画っぽくなる。
これを毎回手でやるのはめんどう。

ImageMagickで加工する

ImageMagickで自動化する。というのも考えた。ブラウザでダウンロードして、その画像をconvertコマンドで変換して、lpコマンドで印刷する。
ダウンロードしてから、ファイル名を指定するのがめんどくさい。

$ convert download.jpg   -colorspace Gray -threshold 50% output.png; lp output.png

ブラウザ上で画像加工する

ファイル名を指定しなくてもいいようにするためには？と思うと、ブラウザで直接実行したい。
ブックマークレットとして画像を線画っぽい2値化した画像に変換できるツールを作った。
let.hatelabo.jp

たとえば、こういうページで実行する。線画に変換したい画像の上で右クリックすると、
おにぎり / hitode909のステッカー通販 ∞ SUZURI（スズリ）

こういう新しいタブが開いて、

ページ下のスライダーで、色の濃さの具合を調整できる。

これをブラウザからCommand+Pなどして印刷するとこうなって

子に渡すと、無事、塗り絵として利用できる。足も生やしてくれた。

SUZURIではうまくいったけど、x.com で実行すると、Content Security Policyにひっかかって、うまく動かなかった。
そういう場合は、まず、変換したい画像だけをタブで開いてから実行するとよい。

こだわりポイント

画像を右クリックすると動く
- 通常クリックだとすでにイベントリスナが指定されていて横取りできないことが多かった。右クリックはアプリケーションからハンドリングしている機会が少ないようで成功率が高かった
あとで印刷することを見越して、window.openで新しいタブを開く
canvasで画像加工じゃなくて、SVGの中にimage属性を置いてフィルタをかける
- canvasだとCORSにひっかかってピクセル処理できないことがある
スライダーを設置して、フィルタのかけ方を調整できる
- プログラムからは画素値を取れないので、いい塩梅を計算するのができず、ここは人力
- ここのUIは何パターンか試した。画像の上でクリック、スクロール、スライダーを2つ出す、など
@media print {を使って印刷時にはスライダーのUIは印刷されないようにする