# 画像の黒塗り｜モザイク・ぼかしも 隠した部分はファイルから消えます。上に置かれるのではありません。 > 写真やスクリーンショットの名前・住所・口座番号を隠して保存し直します。隠した画素は四角形の下に残るのではなく、ファイルから消えます。処理はすべてブラウザ内です。 これはhttps://abox.tools/ja/redact-image/にあるブラウザー用の対話型ツールです。ファイルはそのブラウザーを実行する端末上で処理します。意図した共有や任意の通信機能はページ内で説明します。以下は文章による説明です。利用するにはアドレスを開いてください。 ## 画像は**ブラウザー内で処理**されます。処理のためのアップロードはありません。 画像の読み込み、塗りつぶし、書き出しはすべて手元のブラウザが、最初から入っているコーデックで行います。このツールにはネットワーク機能が一切なく、取りに行くことも送ることもできません。それがこのサイトのほかのどのページよりも効いてくる場所です。黒塗りツールに持ち込まれる画像は、名前や住所や口座番号がまだ読める状態のものだからです。 - ✗ アップロードなし - ✗ アカウント不要 - ✗ 透かしなし - ✓ オフラインで動作 - ✓ オープンソース ## 隠した部分が本当に消える画像の黒塗りのやり方 1. **画像を選びます。** スクリーンショットでもスキャンでも写真でも、ブラウザが開けるものなら何でもかまいません。ディスクから直接読み込まれ、その間もどこへも送られません。 2. **見せたくない場所に枠をドラッグします。** 続けてもう1つ引けます。枠はドラッグで動かし、ハンドルで大きさを変えられます。Tabキーで枠に移り、矢印キーで動かすこともできます。枠の下に見えているものが本当の結果で、ファイルを書くのと同じコードが描いています。 3. **黒塗り・モザイク・ぼかしから選びます。迷ったら黒塗りです。** 黒で塗りつぶすと何も残りません。モザイクとぼかしは画素をその平均値に置き換えるだけなので、背景の顔には十分でも、文字として読めるものには足りません。 4. **「黒塗りして保存」を押し、ファイルを確かめます。** そのあとに出る画像は、できあがったファイルをもう一度読み込んだものです。編集ソフトで開いてレイヤーを探すか、隠した文字を選択してみてください。あるのは平たい画像1枚だけで、隠した場所は書き出しより前に上書きされています。 ## 詳しい解説 [隠した部分が本当に消える画像の黒塗りのやり方](https://abox.tools/ja/guides/redact-an-image/): たいていのソフトが描く黒い四角は画像の上に乗っているだけで、動かせてしまいます。本当の黒塗りと、ただ覆っただけの状態は何が違うのか。モザイクをかけた文字がなぜ読み戻せるのか。送る前にファイルを確かめる方法。 ## 箱の中のほかのツール - [EXIFビューアー・削除ツール](https://abox.tools/ja/exif-editor/): 写真が持ち主について語っていることを見て、それから外します。 - [DICOMビューア](https://abox.tools/ja/dicom-viewer/): CT・MRI・レントゲン・超音波を、ウィンドウとヘッダーと計測つきで。 - [画像→ICO変換ツール](https://abox.tools/ja/image-to-ico/): 画像を1枚入れれば、ブラウザもWindowsもMacも、求めるサイズがすべて出てきます。 - [画像→データURI変換ツール](https://abox.tools/ja/image-to-data-uri/): 画像まるごとを1行のテキストに。そのままCSSやHTMLに貼れます。 ## よくある質問 ### 画像はどこかにアップロードされますか。 いいえ。ファイルの展開も黒塗りも書き出しも、手元のブラウザが手元の端末で行います。このツールにはネットワーク機能が一切なく、取りに行くことも送ることもありません。ページの`Content-Security-Policy`には接続してよいアドレスがすべて書かれていて、そのどれもこのサイトのものではありません。一度読み込んでからインターネットを切っても、そのまま動きます。 ### 隠した部分は本当にファイルから消えていますか。 はい。そのためにこのツールがあります。画像は画素のバッファに展開され、枠の内側の画素が上書きされ、そのバッファが新しいファイルとして書き出されます。エンコーダーが何かを受け取るより前に元の値はメモリーから消えているので、隠すレイヤーも、外す注釈も、取り消せる履歴もありません。確かめ方は他人の主張を確かめるときと同じです。結果を画像編集ソフトで開いて2枚目のレイヤーを探すか、隠した文字を選択してみてください。 ### モザイクやぼかしをかけた場所は復元できますか。 できることがあります。選ぶ前に読んでおく価値があるのはここだけです。黒で塗りつぶすと、下にあったものはすべて1色に置き換わり、輪郭も平均値も文字数も残りません。モザイクは各ブロックをそのブロックの平均色に置き換えるので、平均値の格子は下にあったものの測定値として残ります。ありふれた書体で大きさも予想できる文字なら、候補の文字列を同じように描いて平均を突き合わせることで元に戻せた、という研究が公表されています。ぼかしは畳み込みであり、畳み込みは原理として逆算できます。背景の顔にモザイクをかけるのはかまいません。文字として読めるものは黒く塗ってください。 ### 文書ソフトで黒い四角を描くのとは何が違うのですか。 多くのソフトは、その四角を画像の中ではなく画像の隣に保存するからです。PDFビューアーやスライド、ワープロ、レイヤーのある画像編集ソフトで描いた図形は、位置を持ってページの上に乗っているオブジェクトです。動かしても消しても、別のソフトで開いても、下にあったものがそのまま出てきます。裁判所も官公庁も新聞社も、この形で文書を公開してしまったことがあります。ここでは四角そのものが保存されません。あるのは、元の値の上に書かれた画素値だけです。 ### EXIFやGPSのデータも消えますか。 はい、副作用として消えます。保存とは画素で埋めたキャンバスを書き出すことで、キャンバスはタグを持ちません。撮影場所もカメラの機種も日時も、埋め込みサムネイルも、新しいファイルには書かれません。サムネイルはここでは重要です。画像の小さな2枚目の複製で、写真を編集しても作り直されるとは限らず、黒塗りした写真が黒塗り前のサムネイルを連れていくと、作業がまるごと台無しになります。[EXIFビューアー・削除ツール](https://abox.tools/ja/exif-editor/)はJPEG、PNG、WebPの画像を再エンコードせずにメタデータを閲覧・編集します。AVIFは抽出できたEXIFの読み取り専用表示に対応し、最初にデコードした画像を新しいPNGへ変換して削除します。色やHDRが変わる場合があります。 ### 対応している形式は何ですか。 読み込みはブラウザが展開できるものすべてで、実際にはJPEG、PNG、WebP、GIF、BMP、それに最近のブラウザならAVIFです。書き出しはJPEG、PNG、WebPで、これがブラウザに入っているエンコーダーだからです。「自動」ではJPEGはJPEGのまま、それ以外はPNGになります。写真は写真の大きさのままで、スクリーンショットに残した文字はにじみません。この選択は黒塗りには関係しません。エンコーダーが見るときには、画素はすでに消えています。 ### マウスなしでも使えますか。 使えます。「中央に枠を追加」で1つ置き、Tabキーで枠を移り、矢印キーで動かし、Altと矢印キーで大きさを変えます。Shiftを押すと1回が10ピクセルになり、Deleteキーで削除できます。枠ごとに画像の下へ、大きさ・位置・何をするか・削除ボタンが並んだ行も出るので、ツール全体がキーボードだけで扱え、スクリーンリーダーで読めます。 ### スマートフォンでも動きますか。 動きます。枠を引く、動かす、大きさを変える操作はマウスイベントではなくポインターイベントなので、指でも同じように使えますし、タッチ画面ではハンドルが大きく描かれます。画面の画像は作業中は画面サイズで描き直され、ファイル自体はボタンを押した時点で元の解像度のまま黒塗りされます。 ### 無料ですか。アカウントは必要ですか。 無料で、アカウントもログインも試用期間も透かしもありません。画像の大きさにも制限はありません。費用を払っているサーバーがなく、処理は手元の端末で起きているからです。運営費は広告でまかなっていますが、広告に画像のことは何も渡していません。 ## この主張を確かめる方法 - **処理はこのブラウザー内で行います。** 入力と結果はブラウザー内で処理し、処理コードはそれらを処理用にアップロードしません。Content-Security-Policyは資源と接続先を制限しますが、許可済みの相手はリクエストを受け取れます。内容は検査せず、何も送られないことを単独で証明しません。具体的な操作の要求とソースを比較するか、切断中にローカル操作を完了してください。 - **隠した画素は、出ていく途中ではなくここで消えます。** 画像は画素のバッファに展開され、枠はそのバッファに書き込まれ、バッファがエンコーダーに渡ります。枠を別レイヤーとして持つ画像はこのページのどこにも存在しません。そもそも作られないからです。`src/redact.js`を読んでください。 - **ここでは何も取りに行きません。** `src/`のどこにも`fetch`も`XMLHttpRequest`も`sendBeacon`もありません。やっているのは`getImageData`と、バイト列を回る3つのループと、`canvas.toBlob`だけで、どれもブラウザに最初から入っています。 - **枠のことはどこにも報告されません。** どこに引いたか、いくつ引いたか、どの大きさか、どの種類を選んだかは、このページを閉じるまでメモリーの中だけにあります。それを持ち出す計測イベントはこのリポジトリに1つもなく、ダウンロード後に出るあの1問が送るのは、親指の上下とツールの名前だけです。 - **オフラインで動きます。** ネットワークを切ってもツールは変わりません。もともとネットワークの工程がないからです。いちばん簡単な証明であり、パスポートを黒塗りする前に一度やっておく価値があります。 **自分で確かめてください。**以上のどれも、鵜呑みにする必要はありません。このページは、リポジトリにあるテンプレートと設定から、誰でも読んで実行できるビルドスクリプトが生成しています。その結果は`dist`ブランチに置いてあるので、配信されているものと、ソースをビルドした結果とを差分で比べられます。 https://github.com/A-Box-of-Tools/website まず読むとよいのは、Content-Security-Policyについては`config/site.toml`、画素を上書きする3つの関数は`src/redact.js`、画面に見えているものがその同じ3つの関数で描かれている理由は`src/preview.js`です。