MATz Tech

webの技術的なことを中心にいろいろと

jQuery

jsとcanvasで画像の容量を落とす〜その2〜

前回のだと上手くcanvasに描画されない場合が多かったので、やり直してみました。 htmlはこちら。 <form action="" method="post" id="imageForm"> <img src="" id="preview" /> <canvas id="canvas"></canvas> <input type="file" id="imageSelect" onChange="imgDisp();" /> <input type="button" onClick="imgUpload();" value="アップロード" /> </form> まず、ファイル選択時の処理…

ファイル選択した画像をモーダル表示

前回に引き続き、画像のファイル選択ネタです。今回は、ファイル選択した画像をモーダルウインドウで表示します。 jQueryのプラグインでこれ系のはけっこうあるんですけど、敢えてプラグインに頼らずやってみました! htmlとcssはこんな感じです。 <div id="modal-content"> <img src="" id="preview" width="500px" /> <a id="modal-cancel" class="button-link">cancel</a> <a id="modal-ok" class="button-link"></a></div>…

【修正あり】jsとcanvasで画像の容量を落とす

【2017/5/1】 修正加えたその2書きました。 matz.hatenablog.jp【2017/4/2修正】 phpのソース載せてなかったので、追記しました。 phpで画像アップロードしたいけど、最近のiPhoneのカメラとか画質良いので容量オーバーしちゃいますよね。まあphp.iniで「pos…