はじめに
フリマで発送先をやり取りしたチャット、問い合わせのために撮った伝票、相談したくて保存した LINE のスクショ。
こういう画像を誰かに見せるとき、名前・住所・電話番号が写り込んでいないかを毎回気にして、画像編集アプリで黒い四角を描いて隠す……という作業をしている人は多いと思います。
これを自動でやるWebツール kuronuri を作りました。
画像を選ぶと、文字を読み取って(OCR)電話番号・メール・郵便番号・住所・氏名・カード番号などを見つけ、自動で黒塗りします。漏れていたら指でなぞって追加、塗りすぎていたらタップで外して、保存するだけです。
端末内での完結
クラウドの OCR を使えば精度も実装も楽なのですが、隠したい情報が写った画像を、隠す前に他人のサーバーへ送るのはどう考えてもおかしいので、tesseract.js をブラウザの中で動かしています。tesseract.js は何も指定しないと worker や学習データを CDN から取りにいくので、全部自分のサイトから配信するようにパスを固定しました。そのうえで CSP の connect-src 'self' で外への通信自体を止めています。万が一コードに送信処理が紛れ込んでも、ブラウザ側で弾かれます。
一度開いておけば機内モードでも動きます。
苦手なこと
縦書きは読めません。手書きもほぼ無理です。名字のリストにない珍しい名前も、「様」やラベルがないと拾えません。評価も自作の画像なので、実際の写真ではもう少し落ちると思います。
なので、画面にはずっと「必ず目で確認してください」と出していて、漏れたところは指でなぞれば足せるようにしています。自動で全部やってくれる道具というより、黒塗りの手間を減らす道具だと思ってもらえるとちょうどいいです。
無料で登録不要なので。スクショを人に送る前に使ってみてください。