はじめに
透視図と魚眼パースの相互変換アプリをご用意しました。 どなたでも無料でお使い頂けます。 絵はもちろん写真の加工にもお使いください。
◆ 機能と特徴
- 透視図を魚眼パースに、魚眼パースを透視図に変換できます。
- よくある「魚眼風」ではなく、数学的理論に基づいた正確な魚眼パースに変換します。
- 補助機能として、上下左右反転、90°回転を行うことができます。
- ローカルから画像ファイルを読み込み、変換後はローカルに保存します。
- WEBブラウザ上での動作のため、OSに依存しません。
- 100%オフラインで動作します。画像はサーバーにアップされませんので、安心してお使い頂けます。
※はじめてご利用の方は、以下の説明を先にお読みください。
動作条件
必須要素：Canvas, Web Worker, File API および JavaScript
推奨要素：Web Storage および Cookie
Windowsのみになりますが、動作確認の結果は以下の通りです。
| ブラウザ | バージョン | 詳細 |
|---|---|---|
| Internet Explorer | 10 | 10以上で動作しますが、他ブラウザと比べて圧倒的に遅いです。(11は未検証です) |
| FireFox | 37.0.2 | 快適に動作しました。 |
| Chrome | 42.0.2311.135 m | 快適に動作しました。 |
| Safari | 5.1.7 | 入手可能な最新版で試しましたが、File APIが未サポートなため動作しませんでした。 (Macintosh,iPad,iPhone等では、最新版のsafariであれば動作すると思います) |
| Opera | 29.0.1795.47 | 快適に動作しました。 |
使い方
準備
魚眼パースまたは透視図法で描かれた絵をご用意ください。写真でも構いません。 デジタルデータでない場合は、スキャナやデジカメを利用して、デジタル化してください。 画像フォーマットはJPEGまたはPNGを推奨します。
魚眼パースを透視図（中心射影）に変換する場合
◆変換前の画像：魚眼レンズで撮影した写真、または魚眼パースによって描かれた絵- 破線の領域に変換対象となる画像ファイルをドロップしてください。あるいは「読込」ボタンをクリックすると、ファイル選択ダイアログが表示されますので、変換したい画像ファイルを選択してください。
- 魚眼の画角を入力してください。例えば画角180°の全周魚眼レンズで撮影した写真の場合は、魚眼の画角を180°に設定します。（不明な場合はとりあえず180°でお試しください）
- 透視図の画角を入力してください。切り取りたい範囲に応じた値を設定することになりますが、良くわからなければまずは120°程度でお試しください。
- 射影方式を選択してください。魚眼レンズの射影方式については、レンズの説明書等で確認してください。よく分からなければ等距離射影を選んでください。 （市販されている魚眼レンズの多くは等距離射影方式です）
- 「透視図」ボタンをクリックすると、魚眼 ➡ 透視図の変換が行われます。
- 「保存」ボタンを使うと、出来上がった画像をローカルに保存することができます。 環境によっては保存ボタンが使えないことがありますので、その場合は「IMGに変換」ボタンをご利用ください。 クリックすると別窓で画像が表示されますので、(WINDOW環境であれば)右クリックをして「名前を付けて画像を保存」等のメニュー項目を選んでください。
魚眼の写真を透視図に変換した際に、直線になるべき線が曲がってしまう場合は、画角の設定が適切でない可能性が高いです。 このようなケースでは、魚眼の画角を増減させ、真っ直ぐになる角度を探してください。
見た目を決めるのは、変換前の画角（魚眼 ➡ 透視図の場合は魚眼の画角）です。 変換後の画角はトリミングの範囲に影響を与えるだけであり、直線性の改善には寄与しません。
透視図（中心射影）を魚眼パースに変換する場合
◆変換前の画像：普通のレンズで撮影した写真、または透視図法によって描かれた絵- 破線の領域に画像ファイルをドロップしてください。
- 魚眼の画角を入力してください。切り取りたい範囲に応じた値を設定します。透視図よりも大きな画角を設定してください。
- 透視図の画角を入力してください。横長の写真の場合は、レンズの水平画角を入力してください。
- 射影方式を選択してください。
- 「魚眼」ボタンをクリックすると、透視図 ➡ 魚眼の変換が行われます。
- 「保存」ボタンをクリックして、画像を保存してください。
標準レンズで撮影した写真を魚眼パースに変換する場合は、透視図の画角を40°程度に設定した上で、魚眼の画角をそれよりも少し大きい角度(例えば50°)に設定して変換を掛けてみてください。 恐らくほとんど変化のない画像ができるかと思いますが、仮に標準画角の魚眼レンズが市販されていたとすれば、そのような写真が撮れます。
広角レンズについても一例を上げておきます。35mm換算焦点距離が10mmの広角レンズの場合、水平画角は122°ですので、透視図の画角に122を設定します。魚眼の画角は150°ぐらいで良いと思います。
リファレンス
アプリが提供するGUIの個別説明です。
透視図（画角）
透視図の画角を設定します。画像が正方形の場合は、正方形に内接する円に対応する画角を入力してください。 長方形の場合は、長辺を直径とする円に対応する画角を入力します。 設定可能な値の範囲は0°～180°ですが、0°と180°は無効な値です。（一応セットはできますが、正常に動作しません）
魚眼（画角）
魚眼レンズの画角を設定します。透視図の場合と同じですが、画像が正方形の場合は、正方形に内接する円に対応する画角を入力し、 長方形の場合は、長辺を直径とする円に対応する画角を入力します。 設定可能な値の範囲は0°～360°ですが、正射影の場合は180°が上限となります。0°はもちろん無効な値です。 また立体射影の場合は360°が無効値となります。無効な値でも設定はできますが、正常に動作しません。
変換元X（画像サイズ）
変換前の画像、すなわち読み込んだ画像の横幅が表示されます。この値は編集できません。
変換元Y（画像サイズ）
変換前の画像の縦幅が表示されます。この値は編集できません。
変換元Y（画像フォーマット）
変換前の画像の画像フォーマット(jpeg,png等)が表示されます。この値は編集できません。
変換先X（画像サイズ）
変換後の画像の横幅を指定します。0を指定すると入力画像と同じ大きさになります。最大値は10000です。
変換先Y（画像サイズ）
変換後の画像の縦幅を指定します。0を指定すると入力画像と同じ大きさになります。最大値は10000です。
変換先（画像フォーマット）
画面に表示されている画像を保存する際の画像フォーマットを指定します。autoを指定すると入力画像と同じフォーマットで出力します。 各画像フォーマットの特徴は以下の通りです。適切なものをお選びください。
| フォーマット | 圧縮 | 色数 | 透過 | 特徴 |
|---|---|---|---|---|
| png | 可逆 | 約1678万色 | ○ | 可逆圧縮方式のため、画像が劣化しません。 不透明度を持つ画素を保持できるため、完全な透明はもちろん半透明画素を表現することもできます。 画素数の多い画像の圧縮や展開は、jpegよりもかなり遅いです。 色変化の少ない単調な画像を保存するのに向いています。 |
| jpeg | 不可逆 | 約1678万色 | × | 不可逆圧縮方式のため、画像が劣化します。 不透明度は保持できません。本アプリでは不透明画素を扱えますが、jpegで保存する際はすべて黒に置き換わります。 圧縮または展開はpngと比べて高速に動作します。 写真のように色変化の多い画像を保存するのに向いています。 |
| gif | 可逆 | 256色 | △ | 可逆圧縮方式のため、圧縮による劣化はありませんが、最大で256色しか表現できないため、色数の多い画像を保存すると、元の色を復元できません。 透明画素を扱うことができますが、半透明画素は扱えません。 |
| bmp | なし | 約1678万色 | × | 画像を非圧縮で保持します。半透明画素は保持できません。 圧縮展開工程がないため、ファイルサイズが大きいことを差し置いても、読み書きは高速です。 主にwindowsで使われる画像フォーマットです。 |
写真の場合はjpeg、それ以外の場合はpngを推奨します。ただし不透明度を保持したい場合は、基本的にpng一択です。劣化を避けたい場合もpngを使ってください。 jpegとpngはほぼどのブラウザでもサポートしていますが、gifとbmpは対応していない場合があります。その場合はpngで保存されます。
品質（画像フォーマット）
画像フォーマットがjpegの場合のみ、意味を持ちます。jpeg以外を指定した場合は、本パラメータは無視されます。 1～0の範囲で指定してください。1を指定すると最高の画質が得られますが、ファイルサイズは大きくなります。 0を指定すると、ファイルサイズは小さくなりますが、見るに堪えないほど画像が劣化します。 0.9～0.7程度を推奨します。
念のため補足しておきますが、jpegは不可逆圧縮であるため、最高品質である１を指定したとしても、画像はわずかに劣化します。 一方、pngやbmpは一切の劣化がありません。よって画質面では、品質１のjpegよりもpngやbmpの方が上であると言えます。
消去
表示されている画像を消去します。（表示をクリアするだけであり、読み込んだ画像ファイルは削除されません）
読込
ローカルから指定した画像ファイルを読み込みます。クリックするとファイル選択ダイアログが表示されますので、開きたい画像を選択してください。
保存
現在表示されている画像をファイルに保存します。ブラウザの設定次第ですが、多くのブラウザは所定のフォルダに自動的に保存する仕様となっています。 (Internet Explorerではこのボタンが使えない可能性が高いです。代わりに「IMGに変換」ボタンを使用してください)
IMGに変換
現在表示されている画像を別ウィンドウにIMGタグで表示します。（メイン画面に表示されている画像はCANVASというタグを使っています）。 表示された画像を右クリック等でメニューを開き、「名前を付けて画像を保存」等の項目を選んでください。（ブラウザによってメニュー項目の名称は異なります）
CANVASタグに表示されている画像は縮小されていますので、そのままでは保存用途には向きません。（常に500x500画素で保存されてしまいます）。 「保存」または「IMGに変換」ボタンを使うと、本来の解像度で画像を保存することができます。
戻す
表示されている画像を１つ前の段階に戻します。つまり画像が変化する操作をした場合、操作を１段階分戻すことができます。 戻せる回数には上限がありますので、ご注意ください。（現行仕様では10回です）
やり直す
「戻す」ボタンの効果を取り消します。つまり戻した操作を再度実行することができます。
退避
現在表示されている画像をローカルストレージと呼ばれる記憶領域に退避させます。 退避した画像はブラウザを閉じても、端末の電源を切っても保持し続けます。 本アプリでは操作を簡略化するため、退避領域は画像１枚分しか用意していません。
復帰
過去に退避した画像を復元します。
左右反転
現在表示されている画像を左右反転させます。
上下反転
現在表示されている画像を上下反転させます。
90°左回転
現在表示されている画像を反時計回りに90°回転させます。
90°右回転
現在表示されている画像を時計回りに90°回転させます。
透視図（変換）
現在表示されている画像が透視図（中心射影）であるとして、これを魚眼パースに変換します。
魚眼（変換）
現在表示されている画像が魚眼パースであるとして、これを透視図（中心射影）に変換します。
射影方式（変換）
変換の方向がどちらであるかに関わらず、魚眼パース側の射影方式を選択します。 「立体射影」「等距離射影」「等立体角射影」「正射影」のいずれかを選ぶことができます。 本アプリは射影方式の異なる魚眼同士の変換をサポートしていません。 一旦透視図に変換したあと、再度魚眼に変換すれば、一応は射影方式の変換ができますが、画質面で満足な結果が得られない可能性があります。
最大画角未満（背景色）
魚眼で指定した画角未満かつ変換元画像の領域外である場合に、ここで指定された色が使用されます。 色はRGBの各色に加えて、アルファ値（不透明度）も指定することができます。 各値は0～255の範囲内で指定します。0はその成分がないことを意味します。 透明や半透明でない通常の色を使いたい場合は、Alphaを255に指定してください。 Alphaを0に設定すると完全な透明画素になります。このときRGBの値は無視されます。 Alphaを1～254の値に設定すると半透明画素になります。
最大画角以上（背景色）
魚眼で指定した画角以上の領域を塗り潰す色を指定します。
FAQ（よくある質問とその回答）
Q1. 魚眼レンズの画角として180°を超える角度を設定する意味はあるのですか？
本アプリが提供する機能は透視図と魚眼の相互変換なため、透視図の画角が180°未満に限定されている以上、魚眼の画角を180°以上に広げてもそこには何も映りません。 よって本質的には180°超の設定は意味がないと言えますが、180°視円錐の外側に余白を持つ画像を入力とする可能性があることを考慮し、180°超の画角を設定できるようになっています。 （正射影の場合は余白に相当する画角を指定できないので、将来的にインターフェースを変更する予定です）
Q2. 変換の際に画素データの補間は行われますか？
現バージョンでは補間を行っていませんが、双線形補間（バイリニア）の実装は検討項目に入っています。
Q3. WEB上にある画像を直接読み込むことはできないでしょうか？
近年はクラウドストレージ等にデータを預けている方も少なくないと思いますが、残念ながらそれらのデータを直接本アプリに読み込ませることはできません。
CANVASの仕様上、別ドメインにある画像の画素データを取得することができません。 同一ドメイン（つまり本サイトにある画像）であれば、直接読み込むことが可能ですが、それ以外となると一旦本サイトのサーバーに画像データをアップロードする必要が出てきます。 しかし現状はサーバーを関与させる機能への拡張は考えていません。
Q4. スマートフォンで撮影した写真を直接読み込ませたいのですが？
iPhone(iOS 8.3)を例に取りますが、「読込」ボタンをクリックしたあと、「写真またはビデオを撮る」を選択してください。
仕様上は撮影した写真を直に処理することが可能なはずですが、近年の携帯端末は画素数の多い画像を生成するため、正常に動作しない可能性があります。(携帯機固有の問題です。パソコンであれば高画素数であっても、まず問題は出ません)。 どうしても動作しない場合は、撮影を別途行い、画素数を下げてからご利用ください。画素数を下げる簡単な方法は写真を表示した状態でスクリーンキャプチャを取ることです。
Q5. ローカルストレージとはなんですか？
WEB STORAGEと呼ばれる機能の１つであり、WEBブラウザが管理する領域に任意のデータを保存できます。 この機能を使うと、サーバーにデータを預けることなく、作業途中のデータを保存することができます。 COOKIEと同じく、ユーザーが明示的にファイル名等を指定して保存するのではなく、ブラウザが管理する領域に自動的に保存されます。 HDD等の不揮発性メモリに保存されるため、電源を切断してもデータが消えることはありません。 ローカルストレージのデータは各ブラウザが個別に持っていますので、あるブラウザで保存したデータを別のブラウザで読み出すことはできません。
Q6. ローカルストレージには何枚の画像が保存されますか？
本アプリの現行仕様では、ローカルストレージに保存されるのは、画像サイズに関わらず最後に退避させた１枚だけであり、すでに他の画像が保存されている状態で「退避」ボタンをクリックすると、 保存されている内容は削除され、新たな画像に置き換わります。また「退避」ボタンをクリックしない限り、勝手に保存されることはありません。
Q7. ローカルストレージに保存された画像を削除したいです。
ブラウザの機能により削除できますが、操作が簡単でない場合も多いです。 下のボタンをクリックすると、画像を削除できます。 ローカルストレージの内容を削除
※このボタンをクリックして削除されるのは、本サイトで保存したデータのみです。他のサイトでローカルストレージを使用していたとしても、それらのデータは削除されません。Q8. 読み込んだ画像が破壊される心配はありませんか？
本アプリで変換処理を掛けたとしても、読み込んだ画像ファイル上に勝手に上書きすることはありません。 元画像が破壊されるケースとは、画面に表示されている画像に対して右クリック等で「名前を付けて保存」を選び、元画像と同じパスを指定した場合に限ります。
