Techwebの技術的なことを中心にいろいろとこの広告は、90日以上更新していないブログに表示しています。jQuery前回に引き続き、画像のファイル選択ネタです。今回は、ファイル選択した画像をモーダルウインドウで表示します。jQueryのプラグインでこれ系のはけっこうあるんですけど、敢えてプラグインに頼らずやってみました!htmlとcssはこんな感じです。background-color:rgba(0,0,0,0.75);}そしてjsはこちら!まず、全体をグレーで覆って、その上にモーダルウィンドウを表示します。imgタグに選択した画像を設定して表示すればOK!シンプルですね!OKボタン・背景グレー・cancelボタンクリックの場合の処理は、背景グレーとモーダルウィンドウ非表示にするだけなんで基本的には全て同じなんですが、cancelクリックの時だけファイル選択クリア入れてます。修正加えたその2書きました。matz.hatenablog.jp【2017/4/2修正】phpのソース載せてなかったので、追記しました。phpで画像アップロードしたいけど、最近のiPhoneのカメラとか画質良いので容量オーバーしちゃいますよね。まあphp.iniで「post_max_size」とか触ればいいんですけど、なんせ重いです。それなら、クライアントで容量落としてから上げれば良いじゃん!ってことでこちらの方法!htmlはこんな感じです。type="file"で選択した画像を、一旦img要素に原寸サイズで表示します。原寸サイズで表示して全体のレイアウト崩れるの嫌なら、hiddenにすればOKです。次に、img要素から画像をimageオブジェクトとして取得して、canvas要素に描画します。描画時にサイズ縮小すると、これだけで結構容量下がります。今回は横幅800px固定にして、縦横比保ったまま縮小してます。ちなみに、canvas要素もhidden入れたら非表示にできます。アップロードボタンクリックしたタイミングで、canvasデータの画質を落としてajaxでPOST送信します。ここではtoDataURLでバイナリ化しますが、この時に第二引数で画質が指定できるんです。0.0〜1.0の数値を指定して、好きな画質に落としましょう。今回は、2MB以下に落とします。最初は、第二引数を指定せずオリジナル容量(画質を落としていない場合の容量)を取得します。次に、取得したオリジナル容量から2MB以下に落とすための数値を算出して、指定しています。upload.phpは、シンプルにPOSTで受けた画像をアップロードしてるだけです。バイナリ化するときにjpgで指定してるので、保存するファイルの拡張子はjpg固定です。$ex->getMessage();}?>なので、この方法だと出来上がる画像はjpg固定になってしまいます。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。