されている画像アップロード用のVue.jsコンポーネントです。特徴Base64にエンコードされた画像データを取得することが出来ます。サイズを指定することで選択した画像をリサイズすることが出来ます。iPhoneで撮影されたHEIC形式の画像をJPEGに変換します。ドラッグ&ドロップでファイルの選択が可能です。デモ画像ファイルを選択すると元の画像とリサイズ後の画像が一覧に表示されます。元の画像に比べて、リサイズ後の方がサイズが小さくなっている事が判ると思います。こちらにデモページを用意しているのでご利用ください。最近のスマートフォンで撮影した写真は解像度が高くそのまま送信してしまうとサーバー側の負荷が高くなってしまったり、通信時間がかかってタイムアウトになってしまう問題が発生してしまいます。その為、クライアント側(javascript側)で画像をリサイズして解像度を小さくしてからサーバー側へ送信する処理は、Webアプリケーションにおいて(特にフロントエンドにおいて)は必須な対応であると考えます。以下は、読み込んだ画像の縦または横のピクセルが指定したサイズよりも大きい場合は、アスペクト比を維持したまま指定したサイズにリサイズをすることでサーバーへ送信するファイルサイズを小さくしています。サイズを小さくして解像度を下げすぎると表示される画像の見た目が荒くなりますが、サイズが大きいと画面を表示する際に読み込みが遅くなってしまいます。画像の見た目が気にならない程度の解像度にサイズをリサイズすることがポイントです。errorCallback(['選択されたファイルをロードできません。''}fr.readAsDataURL(blob)HEIC形式をJPEGに変換する機能また、iPhone11以降で撮影した写真はHEICというブラウザで表示できない形式の画像ファイルで保存されます。その為、HEIC形式の画像ファイルの場合はJPEGなどブラウザで表示できる形式に変換する必要があります。いうライブラリを利用することで、JPEGなどブラウザで表示可能な形式に変換することが可能です。JamstackのJamはJavaScript/APIs/Markupの頭文字です。APIを利用した検索表示のサンプルをこちらに用意しました。コメントをキャンセル入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。コメント*内容をご確認の上、送信してください。お名前*メールアドレス*次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。Webの学び舎TwitterFacebookはてブPocketLINE。