画像を Unicode 点字テキストのドット絵に変換

表題のとおり、画像を Unicode 点字のモノクロドット絵のテキストに変換します（例）。 javascript による画像処理の試作として作成してみたものです。 特に有用性を目指したものではありませんが、画像をテキスト媒体に貼付けるなどの用途は考えられます。

使い方

入力画像
（要ブラウザサポート）
サンプル
（URL が外部ドメインの場合はアクセス制限あり）
出力サイズ（倍率 - %） 行幅
字
ピクセル比
1.00:1
効果 背景色   
チャンネル
表示調整／出力加工
文字サイズ
16px
ウェイト
bold
字間
-0.300
行高
0.000 

 

動作環境

まず、ブラウザの Canvas 要素への対応が必須になります。 OS とブラウザは新しいバージョンへの更新が必要になるかもしれません。 特に IE （〜8）は Canvas 要素に対応していないようですが、そもそもテスト環境自体無いので他の部分での互換性も考慮されていません。最近では Chrome Frame なる IE アドオンがあって、このページと互換性のある Google Chrome ブラウザを IE の中で動かせるようなので、このページもそれに対応させてみました（試してはいません）。

次に、変換結果が見えるためには Unicode 8点点字（コードポイント 0x2800 - 0x28FF の範囲）のフォントがシステムにインストールされていて、なおかつ、ブラウザが適切にそれらの文字を表示できなければなりません。 例えばあるブラウザの過去バージョンでは動作は問題なかったのですが点字フォントを表示できませんでした。

更に、下でより詳しく述べますが, セキュリティ上、画像処理に必要な画像の内容データ（画素）へのアクセスも制限される場合があります。 これは処理対象画像ファイルの 形式, その所在（URL）, このページの所在（例えばこのページがローカルに保存された複製の場合）, ブラウザのセキュリティポリシーに依存します。

例

左の画像を変換すると右の画像のように見える点字テキストが出力されます。 この例は背景色を黒、出力の一行あたりの文字数を 50 字に設定した場合の結果です。 このときの行数は 30 で 8 点点字は 2 x 4 ドットなので幅 100 x 高さ 120 ピクセルのモノクロビットマップに相当します。 また、この例の変換元画像はグレイスケールですが、カラー画像でも処理は変わりません。

ブラウザが Unicode 点字フォントを表示可能なら下の点字テキストが見える筈です。 見かけの縦横比は文字プロポーションなどフォント固有の特性からそれらに対するブラウザの扱いなど利用者環境に依存するので上の画像と多少縦横比や大きさが異なって見えるかもしれません。 

⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠐⡐⢢⣑⣆⠲⡐⣆⣒⡌⡜⢦⠱⢌⢣⡝⣯⣟⣽⣫⣽⢫⣿⡹⣏⡿⣹⣏⢷⢫⣿⣙⣯⣏⢯⣿⡘⡇⢎
⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⡤⠖⠲⠿⣡⡼⣻⣿⢿⣿⡿⢻⠟⡿⢿⣿⡿⠿⡿⠿⢟⠻⣟⠓⠻⠽⣳⣏⢾⣫⢧⢯⢿⣼⣎⢷⣻⠼⣍⢎
⠀⠀⠀⠀⠀⠀⠀⠀⢰⠋⠄⢀⣴⣦⣿⣿⣯⠿⡿⠙⠙⠦⣘⠈⣝⣻⣦⣭⠿⠿⢿⣷⢾⡟⠛⠓⢸⣞⣯⣳⡟⣮⢟⡾⣎⡷⣻⣹⢆⣫
⢢⡀⠀⠀⠀⠀⠀⠀⢰⡀⠈⢸⢋⡞⢁⠋⠄⡃⠌⣀⡀⠀⠀⠀⡔⠂⢣⣈⠙⢉⠡⢀⠂⡘⠀⠌⠀⢸⣿⣿⡛⢷⡺⣝⡧⣟⣿⢸⡇⢶
⠳⣜⡤⠀⠂⠀⠀⡴⠞⠳⠓⠉⠠⡐⠈⠄⠃⢀⠒⢠⠘⠤⢁⠀⠀⠼⠻⠫⠶⠞⠁⡌⠐⠀⠉⠐⣒⣉⣉⠩⡃⣐⣙⠻⣼⢳⣟⢮⡝⢦
⣛⢦⡝⡳⡄⠀⠉⡐⠠⠄⠡⠀⠠⢄⠣⠐⠄⠈⠢⠠⢁⠈⡀⠤⢀⠀⢅⠃⢆⠩⡐⠈⢀⠱⣀⡘⠡⠬⢌⡂⠡⣙⣀⠒⡘⢯⣟⣺⡜⣣
⡞⣧⢻⡵⢭⣷⢦⡴⠇⡈⠤⢁⠠⠀⠀⡄⠨⠄⣁⠒⡈⠔⣈⠦⡡⢌⡐⡈⢀⠣⠄⢃⠀⡒⠰⣉⠳⡀⢂⠘⡐⠀⠡⠘⡜⡳⡜⡳⡞⡥
⢟⡼⣧⣛⢧⡞⠈⡘⠠⠁⠂⠄⠠⡀⢃⠌⣁⠒⡀⢦⣑⠪⣄⣧⡱⢆⡔⡡⠊⡄⢄⠣⠈⢀⠣⠔⠡⢒⠠⠁⠌⠠⠁⡈⠰⠁⠸⡶⢞⡵
⣿⣹⠶⣏⣾⢹⠆⡀⠁⠎⡀⢂⡅⣢⢥⡚⣤⠛⡜⢧⠚⡭⣉⠆⡱⢊⡴⢡⠓⡌⠤⢤⠠⣀⠦⢑⠠⢃⠄⠁⠀⠁⡀⠄⡁⠀⢡⠐⡘⢱
⡾⣭⢿⣹⢶⡹⠞⠠⠈⠀⠄⣸⠾⡙⢎⡑⠮⣝⡘⢦⡙⠴⢡⠊⡑⢋⡐⠣⢙⡌⢳⠠⢃⠤⠘⠠⢒⡉⢌⠂⠁⢀⡀⣀⠀⠐⠂⡡⢘⢨
⣿⡽⣯⣟⡾⣽⡆⢂⠈⠆⡌⢥⡂⡍⠆⠩⢼⣧⡙⢤⠊⡕⠂⢀⡔⢂⣀⠎⡐⢌⢥⢊⠴⣈⠆⡑⢤⠘⡠⢂⡐⠢⢄⠠⠒⡈⢂⠡⠒⡜
⣯⣟⡷⣯⣟⣷⣻⠄⢂⡄⠀⢙⡐⠄⠒⡀⣸⣿⢣⣆⢣⠔⠂⡄⠆⠧⢎⣳⣹⡞⣮⡍⡖⣡⢎⡱⢂⡱⢂⠥⠘⡀⠀⠎⡄⠱⢀⠠⡐⠘
⡿⣯⣿⢷⣻⡾⣽⡎⢈⠰⡉⠆⡘⡼⢂⡔⣿⣯⡳⣜⢯⣞⣳⣬⡟⣿⣻⣽⡳⣽⡱⢞⡱⢣⢎⠲⡡⢎⠥⡊⠅⠀⠀⠀⣘⠸⢀⠣⡑⡼
⣿⢿⣽⡿⣯⣿⢷⡿⣶⣤⣑⠌⣵⣋⣵⣶⣿⣷⣿⣬⣓⡸⢳⣻⣞⣷⣻⢞⡵⣣⣛⢬⠳⣍⢎⡳⡑⢎⠲⣉⠆⡒⡍⢎⡡⠚⡄⠓⡌⡷
⣿⣿⣻⣿⢿⣽⣿⣻⣯⣟⣿⣻⢿⣿⣿⡟⢫⠝⡬⠛⠙⢛⢴⣣⡟⣾⡹⣞⡽⡱⢎⢧⡛⡜⢮⡱⢍⠎⡵⡁⠞⡰⢉⠆⢡⠀⠨⢅⢲⡝
⣿⢿⣟⣿⡿⣿⣾⡷⣿⣽⡾⣟⣯⢿⡾⣿⣌⡚⣑⠒⠲⡉⡴⢯⣻⡷⣽⢎⡷⣩⢏⢮⠵⣋⢧⡙⢮⡙⡴⣉⠖⠡⡐⢌⠢⡅⠒⣼⡻⣼
⣿⣿⣿⣿⣿⣟⣷⣿⡿⣯⣿⡿⣽⡺⣽⣳⣿⣷⡌⣖⣡⡓⣝⢫⢗⡻⣵⢫⢖⡱⣎⢏⡞⣱⢎⡝⢦⡙⢶⢡⠚⢤⠉⠠⠑⡆⠉⢷⡻⡵
⣿⣿⣿⣿⣿⣿⣿⡿⣿⣿⣷⣿⣿⣷⡹⣷⠻⢤⣭⠴⣰⢒⡦⢣⣞⡵⣣⠟⣮⢱⢎⡳⢎⡳⢎⡞⢥⡛⡼⡨⢍⠢⠐⢂⡹⡀⢌⠤⣹⢳
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⣿⣷⣿⣻⣷⣹⣛⣾⢤⢋⣔⣋⣜⣧⣟⡷⣭⢛⡴⣫⢞⡹⢎⡵⢫⡜⣣⠝⡔⢡⠎⡥⠘⢢⠱⡑⣌⢒⣩⢯
⣿⣿⣿⣿⣿⣿⣿⣿⣿⢿⣿⣯⣷⣿⣿⣷⡸⣻⣿⡟⢯⡻⡝⢾⡱⣋⡖⣏⠾⣡⢯⣙⠮⣕⠳⡜⢡⠊⡔⢣⡚⠴⡁⢬⢣⡑⢌⡒⣸⢯
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣾⣿⣷⡙⢯⡜⣣⢳⡙⡶⣍⣳⠹⣌⡳⣍⠶⡩⢞⠌⢣⡘⢤⡙⡜⡣⣍⢣⠕⢊⠖⣌⠢⢜⣸⢯
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣯⣿⣿⣷⣿⣿⣦⡜⡱⢎⡹⡱⢎⠶⣙⢦⠳⣌⢇⠓⣌⠚⣤⡹⢦⡹⣜⡱⡜⡜⢪⠜⣘⣤⣑⣪⡼⣳
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⣿⣿⣿⣿⣿⣿⡿⣿⣿⣷⣉⠖⡹⣌⠣⣍⠶⣙⠢⢌⡜⣤⣛⣶⣛⡧⣗⢮⡱⣎⣽⣾⣿⣿⣿⣿⣿⣿⣿
⡿⣿⢿⣟⠿⣝⡻⣌⠳⠐⠂⣙⣘⣟⣯⣿⣽⣿⣿⣷⣿⣿⡌⡓⢬⡑⢎⡲⢡⠣⢜⣰⢧⣟⡾⣭⢷⣽⣶⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⠹⣜⢫⡎⡟⡬⠑⣈⣴⣾⣿⣿⡿⢿⡋⢿⣽⣿⣿⣿⣿⣿⣷⡝⢦⡙⢦⡱⢃⡓⢮⣽⣾⣽⡾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⡀⣙⣲⣭⣶⣴⣾⣿⣿⣿⡙⢏⠻⡖⡫⠁⣿⣻⢿⣿⣿⣿⣿⣿⣷⣿⣶⣷⣿⣻⣿⡯⢗⡋⣲⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⡟⣿⡹⢿⣉⠦⣙⡌⠳⠈⣡⣴⣶⡶⣥⣎⡬⣙⡬⢶⣱⠺⡜⡷⣊⠷⡼⣑⢣⢢⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⠾⣶⣍⣲⠱⢊⡁⢤⡖⠿⡝⡞⢧⢛⡱⢮⠷⣏⢞⡡⢏⢳⡙⢶⣩⢓⡧⡱⢞⢣⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⣯⣷
⣟⡿⣯⣝⣳⡓⢮⡓⢯⡐⠜⢤⢊⠵⣘⡼⢤⠳⡜⢦⠓⡬⢢⡝⡬⢣⢝⡲⡅⢯⡖⡝⣠⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣻⣽⣳
⣮⣝⣶⣉⣶⣩⣇⣹⣢⣕⣊⣦⣩⣌⣡⣘⣷⣶⣭⣦⣽⣴⣧⣼⣒⣍⣎⣱⣙⣎⣈⣴⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣟⣾⣳⣯⣽

外部ドメインの画像／ローカルの画像へのアクセス

URL から画像を指定する場合

ブラウザのセキュリティポリシーにもよりますが、一般にスクリプトからドメイン外のリソースあるいはローカルのリソース（file:// URL）の内容データへのアクセスには制限がかけられます（「同一生成元ポリシー」あるいは英語では "same origin polycy" と呼ばれているようです： 参考（Mozilla） 参考（IBM） ）。 この制限は画像の内容データ（すなわち個々の画素の色）についてもあてはまり、通常、このサイトのドメイン外の画像に対してはスクリプトによる画像処理は行えません（もちろん、ブラウザは外部ドメインの画像を表示することはできますが、それは利用者から「見える」ものであって, ページ内のスクリプトから「見える」わけではありません）。 現在では多くのブラウザで javascript による画像の画素データを処理できるようになったので、それらのブラウザでは例えば光学文字認識（ OCR ）プログラムのようなもので画像内に絵として埋め込まれた（何らかの機密情報も含まれ得る）テキストなどを読み取る事も可能です。

この制限は、このページをローカルディスクにダウンロードしてローカルの画像ファイルを対象に実行する場合についてもあてはまり、多くのブラウザでは画像がページと同じディレクトリにあったとしてもセキュリティポリシー上、外部ドメインの画像として扱われるようです。 ただし、 Safari (OSX) については例外で、下の表に示すように制限がかからないようです（制限はファイルのパーミッションのみになるようです）。

ファイル選択フォームからローカルの画像ファイルを与える場合

ファイル選択フォームから画像を指定した場合のデータ読み込みには、 File API （FileReader オブジェクト）を利用しています。 この場合、一部のケースを除いて上記の制限がかからなくなるようです（＊）。 この機能は比較的新しいものなので、実装しているブラウザは下の表に示すようにまだ限られているようです。

（＊） ファイル選択ダイアログを通して利用者から明示的に処理対象のファイルが指示される場合、利用者側から見れば実質的にサーバ CGI に送信する場合と操作は同じであり、サーバサイドで cgi がサーバに送信されたデータにアクセスして処理を行うか、クライアントサイドのブラウザの中でページ内のスクリプトがデータにアクセスして処理を行うかの違いだけになるので、スクリプトからのアクセスに制限をかける意味はない、と考えることができます。 標準のファイル選択フォームから（ OS 標準のファイル選択ダイアログを通して、つまり、利用者に明示的に）ファイルを指定する所が肝心で、例えば URL 入力で画像を指定する場合も利用者側からの指示には違いありませんが、この場合は URL を通したファイルの指定であり, その URL はウェブ標準の機能仕様上、スクリプトからの改ざんも自由になります。ブラウザ側は利用者が入力した文字列とプログラムが生成／加工した文字列との区別ができないので、そのような URL のファイルにアクセスを許すとセキュリティリスクが生じます。

ブラウザと画像ファイル内容へのアクセス可否（ MacOS X, 2012 年 3 月現在）
Safari 5 Firefox 4 〜 Chrome 11 〜 Opera 11.11 〜
ファイル選択フォームで選択したローカル画像の内容データ（画素データ）の読み込み （File API の利用による）
未対応 対応 対応 (1) 対応 (2)
URL で指定される画像の内容（画素データ）に対するスクリプトからのアクセス
ページがネット上にある場合の同じドメインの画像内容へのアクセス 可
ページがネット上にある場合の外部ドメインおよびローカル（file:// URL）の画像内容へのアクセス 不可
ページをローカルに置いた場合のネット上の画像内容へのアクセス 可 不可 不可 不可
ページをローカルに置いた場合のローカルの画像内容へのアクセス 可 不可 (3) 不可 可 (4)