2019年4月21日0件のコメントVue.jsでユーザーからの画像投稿を作っていたのですが、「画像のリサイズ処理」をどうやって実装すればいいのか?について色々調べることになりました。動くようになったので、画像のリサイズ処理の実装方法についてまとめておきます。はじめにhttps://qiita.com/elastic/items/aef72b8803d70a25f468本記事では、こちらのQiita記事で紹介いただいたコードをベースに、ちょっと加筆したものを紹介しています。画像のリサイズ処理が必要な理由スマホカメラで画質がよくなっており、画像の容量がバカにならない。これに尽きると思います。スマホで写真撮ると、1枚2MB以上のファイルサイズになったりしますから。ユーザーが撮影した写真をそのままアップしてWebで公開してしまうと、ページ表示の遅延につながりSEO不利だったり、そもそもユーザーが使いにくいといった状態になってしまいます。画像を置いておくストレージの容量や通信料もバカになりません。画像のリサイズ処理はブラウザで行う昔のWebシステムであれば、サーバーにいったんアップロードした後にサーバーサイドのプログラムで画像のサムネイルを作成する構成が一般的でした。現在はブラウザの機能が強化されましたので、クライアントサイド(ブラウザ上)で画像のリサイズ処理が可能となっています。Javascriptだけで画像のリサイズが可能です。組込方は色々あると思うので、あくまで一例とお考えください。1上記コード(imageResize.js)の配置src/assets/js/imageResize.jsこちらのパスに格納しました。アップロード確認用(画面表示用)。}}</script><script>の先頭でimageResize.jsをimportしますあとはメソッドの中で読み込んだ関数を呼べばOKです。※上記コードでは「onFileChange」の中でのみ利用しています。さいごにこんな感じで画像のリサイズが実装できました。画像リサイズはユーザーにとってもメリットが大きいと思いますので、ぜひ実装してユーザビリティーを上げていきましょ~カツオが開発したWebサービスです。「セールサーチ」ネットショップのセール情報の検索サイト!平成の想い出を気軽に年表にしてシェアすることができるサービスです。コメントをキャンセルメールアドレスが公開されることはありません。非エンジニアが個人開発したWebサービスをリリースしてみてfirestoreのセキュリティルール設定(firebaseでユーザー・役割ごとの権限制御)最近のコメント33歳。起業について思うこと。