学習日記 20231010

20:20 2023/10/10

好まれるやり方ではないかもしれないが、
ChatGPTを使用して、
htmlのフォームから画像をアップロード
->モーダルウィンドウ(トリミングボタン付き)を表示させる。
->同時にアップロードした画像をプレビューとして表示させる。
->同時にその画像に対してcropperを適用する。
->トリミングを押下すると、ウィンドウが消える
->トリミングした画像をinput要素のfileにセット。
->同時にトリミングした画像をプレビュー画像として表示

というところまで実装することができた。
実装2日。

解答に対する疑問に対して、詳しく教えてくれるし、何より、
簡単な問題であれば、すぐ回答が返ってくる。
だからすぐ理解できる。
これはいいね。
これが無料で使える今の時代はすごいね。

学習記録ついでに残しておこう。

フォームからアップロードした画像を非同期で読み込むためにはFileReaderオブジェクトを使用する。

let reader = new FileReader();

javascriptにおいてファイルを扱うためにはFileオブジェクトを使用する。

const file = new File(array, filename, options);

フォームに新しいファイルデータを設定するためにはDataTransferオブジェクトを使用する。

const dt = new DataTransfer();

jqueryの書き出しは次の2つで始めることが一般的。
その違いについて。

$(document).ready(function () { ... });

documentオブジェクトが読み込まれて、DOMツリーが構築されたときに指定された関数を実行する。

$(function() { ... });

上の書き方のショートバージョン。動作は同じで、関数の実行タイミングも同じ。
こちらの方で書く人が多い。

今のままのコードだと挙動がおかしい。
まず最初にファイルをアップロードする。
->モーダルウィンドウが開いて、トリミング可能となる。この時点で元画像データはフォームのfilesにセットされている。
->トリミングを押すと、トリミングした画像が新しくフォームのfilesにセットされる。

キャンセルの挙動について
フォームから画像ファイルをアップする
->プレビュー画像ファイルとトリミング操作可能表示がされたモーダルウィンドウが開く。
　この時点で元画像ファイルがフォームのfilesにセットされる。
->範囲を選択して、トリミングボタンを押下するとトリミング画像データファイルがフォームのfilesにセットされる。
　同時にトリミング画像がフォームに表示される。
->画像を変更するために再度、フォームからアップロードする
->プレビュー画像ファイルとトリミング操作可能表示がされたモーダルウィンドウが開く。
　この時点で元画像ファイルがフォームのfilesにセットされる。
->キャンセルを押す。
->フォームのfilesにセットされているデータを消す。

キャンセルを押したら、前回のトリミングデータをセットさせるようにしたい。
なんかうまいこといかないものか。
22:52 2023/10/10