AA（アスキーアート）の出来としても、ページの作りとしても中途半端になってしまいました。まだまだ理解が足りないのですが、一度記事として作成しておきます。
下のフォームから画像を選択して作成ボタンを押すと、下枠の中にAAが表示されます。
処理フロー
画像のAA化は以下のような流れになっています。
- HTMLのフォームで画像選択、actionにPHPファイルを指定する。
- PHPからPythonファイルを呼び出す。引数として入力画像ファイルパスと出力テキストファイルパスを与える。
- Pythonで画像処理をしてテキストファイルを作成する。
- PHPでテキストをechoで出力する。
- HTMLのiframeに表示される。
ウェブ系の処理に関しては無知のため、もしかしたら変なやり方をしているかもしれませんので参考程度に。
以下は各処理に関することをメモしていきます。
1．HTML
HTMLは以下のようなコードを書いています。
<form action="https://tetorachaos.com/work/askiiArt/src/uploadImage.php" method="post" enctype="multipart/form-data" target="res">
<input type="file" name="image" accept="image/png, image/jpeg">
<button type="submit">submit</button>
<src name="img" id="img"></src>
<iframe name="res" width="100%" height="100%" sandbox></iframe>
</form>注意点はこんな感じでしょうか。
- 「tetorachaos.com」は「public_html」のディレクトリを指している。
※私の環境の場合です。エックスサーバーを使っていて何も考えずにワードプレスをインストールするとここを示します。 - HTML5において、actionのtargetはiframeのみ対応している。
- iframeはちゃんとformの中に入れること。
2. PHPでPython呼び出し
注意点は以下の通りです。
- 実行ユーザーは自分(サーバーのユーザー)になる
エラー処理等は面倒ですが、それほど苦労することはありませんでした。
3. Pythonで画像のテキスト化
注意点は以下です。
- PythonはAnacondaを使って自分でインストールすると楽。
AnacondaはPythonを使うためのパッケージのようなものです。サーバーのホームディレクトリにインストールすることで、自由に使用、カスタマイズができます。
処理の内容はともかく、最終的にはテキストファイルを作るだけなのでそれほど苦労する点はありませんでした。
ファイルパスが日本語のとき正常に動作しないかと思いましたが、そんなことありませんでした。
画像処理はopenCVというライブラリを使用しています。現状いい加減なのでもっとまともなものにしたいです。
4. PHPでテキスト出力
注意点は以下の通りです。
- テキスト出力は<pre>の中で行う。
preは整形済みテキストのブロックです。これがないと空白が表示できません。表示部のソースコードは下記のような感じです。
// ファイルを開く
$fp = fopen($filePath, 'r');
// pre(整形済みテキスト)として表示する
echo "<pre>";
// テキストファイルをすべて出力する
while (!feof($fp)) {
// 一行読み込んで出力
$txt = fgets($fp);
echo $txt;
}
// preの終了
echo "</pre>";
//ファイルを閉じる
fclose($fp);5. HTML
iframeの使い方がよくわかっていません。固定幅で適当に作っています。iframeを使うべきかもわかりません。もっと調べる必要があります。
さいごに
最初にも書いていますが、この機能は色々と中途半端です。AAの質が低すぎる、エラー処理が不十分、もしかしたらセキュリティに問題があるかも、といった具合です。
さらにこのフローがいい方法かと言われるとそうではないかもしれません。特にテキストの表示の仕方はもっと綺麗にできるような気がします。詳しくなれたら改めて記事を作成したいと思います。
コメント