このページのコードが起動しませんでした。

index.htmlをフォルダから直接開くと、ブラウザがJavaScriptモジュールを読み込めません。そのため紙の写真を選んでも何も起きません。フォルダはhttpで配信してください。 

powershell -ExecutionPolicy Bypass -File serve.ps1

そのうえでhttp://localhost:8080/を開いてください。

書類スキャナー｜紙の写真を、まっすぐに

紙を撮ってください。スキャンしたように見えるものが返ります。

日本語
ソースを見る
書類はブラウザー内で処理されます。処理のためのアップロードはありません。

写真のデコード、まっすぐにすること、整えること、PDFへ書き出すことは、すべて手元のブラウザが、計算とすでに入っているコーデックだけで行います。この道具にはネットワーク機能がそもそもなく、取りに行くものも送るものもありません。ここでそれが効いてくるのは、人がどんな紙を撮るかによります。パスポート、給与明細、賃貸契約書、あるいは役所に「スキャンして返してください」と言われた書類です。

いまの通信： 確認中…

オフライン： 確認中…

言葉を信じる必要はありません。開発者ツールを開き、ネットワークタブを見ながら紙をスキャンしてみてください。写真もサムネイルもファイル名も、隅ひとつの位置さえ運んでいるリクエストはありません。あるいは回線を切ってからスキャンしてみてください。

1 写真を選ぶ

1ページにつき写真1枚を、真上あたりから撮ってください。紙全体が画面に入り、四隅は見えているかほぼ見えている必要があります。ほかのすべて、つまり傾きも影も下の机も、この道具がある理由です。複数を足すと、足した順に1つの書類のページになります。

2 四隅を紙に合わせる

写真のどこかを触るといちばん近い隅が指のところへ来ます。それを紙の角までドラッグしてください。Tabでキーボードから隅に移れ、矢印キーで1画素、Shiftと一緒なら10画素動きます。どれも取り返しのつかないものではありません。スキャンは4つの隅が最後に落ち着いた場所から取られます。

写真を選ぶとここに出ます。四隅はすでに見つけてあります。

3 整える

下にあるものが本当の結果で、ファイルを書くのと同じコードが作っています。まっすぐにされ、むらのある明るさを割って取り除いた状態です。選んでいるあいだ画面には画面の大きさで描かれますが、ファイル自体は写真の解像度で作られます。

色つき、むらを取る 紙をページ全体で測って割るので、影が消えて紙は白に戻り、その一方で印影や青インクの署名や蛍光ペンで引いた行は色を保ちます。色が書類の一部であるときはこのモードです。

グレースケール 同じむら取りを、色なしで。カラーより小さく、写真や署名には白黒よりやさしい仕上がりです。

白黒 各画素をページ全体のひとつの数値ではなく、その画素自身の近傍に照らして決めます。それが影の中の文字を読めるまま保ちます。スキャンを小さくするのがこれです。20ページの契約書がこのモードなら1メガバイト未満で、写真としてなら15メガバイト前後になります。中間調がないので、写真の載ったものはこれを選ばないでください。

そのまま まっすぐにするだけで、ほかは何もしません。紙そのものが意味を持つページ、つまり古いもの、色のあるもの、写真のためのモードです。

まっすぐにする写真ができ次第、整えたページがここに出ます。

4 書類を保存する

PDFはここ、このページのメモリの中で1ページずつ作られます。この道具の向こう側には給与明細やパスポートや契約書を送る先のサーバーがなく、コードにもそうするものはありません。

印刷解像度 ある画素数でできた用紙をどれだけ大きいと呼ぶか、それだけです。書類が印刷される寸法は変わりますが、スキャンの画素は1つも変わりません。

長辺 まっすぐにしたページの上限です。紙の写真にはその紙に必要な量よりずっと多くの画素が入っていますし、長辺2400はA4でおよそ200 DPIにあたります。

画質 JPEGで保存されるカラーとグレースケールのモード向けです。白黒のページは正確に保存されるので、そちらには効きません。

書類の題名（任意） PDFにはこの道具の名前と入力した題名が記録されます。日付、作成者、端末の情報は入りません。

82%

Markdownで表示

スマホのカメラで書類をスキャンする方法
  1. 紙を撮ります。真上あたりから、紙全体が画面に入り、四隅が見えているかほぼ見えている状態で撮ってください。正面である必要も、明るさがそろっている必要もありません。傾きと影こそ、この道具がある理由です。大事なのは画面を埋めることです。部屋の反対側から撮った紙には、取り戻せる細部が残っていません。
  2. 四隅を確かめます。写真を読んだ時点で自動的に見つけますし、確信が持てないときはページがそう言います。紙と同じ色の机に置かれた紙は、実際に縁がほとんど見えません。写真のどこかを押せばいちばん近い隅が指のところへ来ますし、Tabで隅に移って矢印キーで動かすこともできます。
  3. 明るさをどうするか選びます。「色つき、むらを取る」は紙の明るさをページ全体で測って割り、影が消えても印影や署名は色を保ちます。「白黒」はさらに進み、スキャンをメールで送れる大きさにするのがまさにこれです。画面に出ているものが本当の結果で、ファイルを書くのと同じコードが作っています。
  4. 残りのページを足します。足した写真はそのまま同じ書類の次のページになり、順番は一覧に並んでいるとおりで、各ページは自分の四隅を保ちます。帯のページに付いた矢印がそれを前後に動かします。
  5. PDFを保存し、送る前に開いて確かめます。書類はここ、このページのメモリの中で作られます。作るために何もアップロードされていませんし、それについてどこかに報告されたこともありません。

詳しい解説

スマホで書類をスキャンする方法 ページを撮った写真と、そのページのスキャンを分けているもの。傾きと、むらのある明るさと、ファイルの大きさです。写真の撮り方、そのあと何を直すのか、そしてなぜそのどれにもサーバーが要らないのか。

よくある質問

書類はどこかへアップロードされますか。

いいえ。写真のデコード、まっすぐにすること、整えること、PDFへ書き出すことは、すべて手元のブラウザが手元のハードウェアで行います。この道具にはネットワーク機能がそもそもなく、何かを取りに行くことも送ることもありません。ページのContent-Security-Policyには接続しうるアドレスがすべて書かれていますが、そのどれもこのサイトのものではありません。ページを一度読み込んで回線を切っても、そのまま動きます。

モデルなしでどうやって紙の四隅を見つけているのですか。

四角形を作る4本の長い直線の縁を探しています。写真を縮め、勾配を取り、つまり画像がどこでどちら向きに変わるかを見て、縁の上にある画素はそれぞれ自分が乗るはずの直線に投票します。強い直線を組み合わせて候補の四角形を作り、候補ごとにその4辺をたどって、各辺の下に本当にどれだけ縁があるか、そしてその4本が1つのものの境界になっているかを問いながら点を付けます。紙は周りより明るいか暗いかのどちらかですが、4辺すべてで同じ向きにそうであり、それが文字の一行を紙の下端と取り違えるのを防ぎます。重みはなく、何もダウンロードされず、どの書類が通っても計算は同じ計算です。

見つかった四隅が違います。どうすればいいですか。

ドラッグして直してください。四隅は出発点であって、決定ではありません。スキャンは4つの隅が最後に落ち着いた場所から取られます。写真のどこかを押せばいちばん近い隅が指のところへ飛んできますし、そのほうが小さなつまみを正確に触るより簡単です。矢印キーは、選ばれている隅を1画素ずつ動かします。四隅が見つけたものではなく推測であるときもページがそう言い、その1ページを帯で目印します。だいたいの原因は、紙が自分と似た色の机に置かれていることで、そこには本当に見つけるべき縁がほとんどないからです。

まっすぐにした紙が、なぜ潰れずに正しい形で出るのですか。

形を縁から測るのではなく、遠近から復元しているからです。斜めから撮った紙は遠い側の縁が縮んで見えるので、いかにもな方法、つまり向かい合う辺のいちばん長い組を取ってそれを比とみなす方法では、目に見えて寸詰まりのA4ができます。ウェブのスキャナーの多くがそれを返します。実は四角形の写真には、カメラがふつうのカメラでありさえすれば、その四角形の縦横比とカメラの焦点距離の両方を復元できるだけの情報が入っています。2003年のZhangとHeの結果で、src/shared/document-geometry.jsがしているのがそれです。正面から撮った写真には復元すべき遠近がなく、その必要もありません。そのときは縁が正確だからです。そこで縁のほうへ戻り、どちらが答えたのかをページが書きます。

「整える」は画像に実際何をしているのですか。

明るさを割って取り除いています。紙自身の明るさをページ全体で測ります。細かい升目に分け、升目ごとに明るさの高い側の分位点を取るのですが、文字はそれを動かすには暗すぎまばらすぎます。そして各画素を、その場所で見積もった紙の明るさで割ります。残るのはインクで、明るさはそろい、影も周辺の落ち込みもありません。これはコントラストを上げるのとは違います。撮った紙のコントラストを上げると、明るい側は白く、暗い側は黒くなり、暗い側に書かれたものは読めなくなります。「自動レベル補正」がこうした写真をよくするどころか悪くするのはそのためです。

白黒モードはなぜそんなに小さいのですか。

色が2つの画像は、1600万色の画像に比べて本当にごくわずかなデータで、ここでもそのままそう保存するからです。1画素1ビットを1バイトに8つずつ詰め、正確に圧縮します。白黒の画像をJPEGにするのとは違います。同じページでカラーモードの18分の1ほどになるので、20ページの契約書が15メガバイト前後ではなく1メガバイト未満に収まります。しきい値はSauvolaのもので、各画素をページ全体のひとつの数値ではなく、その画素自身の近傍の平均とばらつきに照らして決めます。それが影の中の文字を読めるまま保ちます。中間調がないので、写真の載ったページはほかのモードを使ってください。

複数のページを1つのPDFに入れられますか。

はい。足した写真はそのまま次のページになり、順番は一覧に並んでいるとおりで、各ページは自分の四隅を保ちます。ですから続けて撮った紙の束が1つの書類になります。帯の各ページに付いた矢印がそれを前後に動かします。整える設定をすべてのページで共有するのは意図的です。同じ書類の中で違う整え方をされたページは、2つの書類のように見えるからです。

文字を読み取って、PDFを検索できるようにしてくれますか。

いいえ。テキストの層も文字認識もありません。出てくるのはページの画像が1ページに載ったものです。きちんとやるならOCRエンジンが要り、それは数十メガバイトのモデルをダウンロードすることになります。給与明細を読む前にモデルを取りに行く書類スキャナーは、給与明細について本国へ電話をかける理由のある書類スキャナーです。文字が必要なら、白黒モードが作るファイルこそ、手元のOCRソフトがいちばんうまく扱える種類のものです。

ぼやけて出ました。なぜですか。

ほとんどの場合、写真の中で紙が小さかったからです。プレビューの下の欄が、紙が画面の何割を埋めたか、そしてその大きさの用紙でおよそ何dpiに当たるかを書いています。150 DPIあたりを下回ると印刷したスキャンは眠く見えますし、そもそもファイルに入っていなかった細部については、どんな道具にもできることはありません。拡大するのではなく近づき、じっとして、押す前にカメラに紙で焦点を合わせさせてください。手ぶれがもう一つの原因で、それも取り戻せません。

無料ですか。アカウントは必要ですか。

無料で、アカウントもログインも試用期間もページ数の制限も透かしもありません。写真の大きさにも制限はありません。その費用を払うサーバーがないからです。処理は手元の端末で起こります。このサイトは広告で運営されていて、広告側にはあなたの書類について何も渡されません。