ブラウザ側でサイズ圧縮(リサイズ)して画像表示やアップロードを行う(Vue.js) - Qiita
概要 Webアプリでクライアントサイド(ブラウザ)で画像を圧縮(リサイズ)する方法の紹介です。 サンプルとして下図のような入力した画像をプレビュー表示した上で、確定時にサーバーに画像をアップロードするまでのサンプルコードを紹介します。 ※今回はvue.jsとvuetifyによるサンプルになりますが、UIのレイアウト部分以外は基本的に一般的なjavascirptですので 他のフレームワークを使用している場合等でも参考にはなるかと思います 動くデモとGitHubのサンプルコードは下記です。 Demo GitHub 背景 Webアプリで、画像ファイルをアップロードするといったシチュエーションはよくあると思います。 スマホ等で撮影した写真等だと、解像度やファイルサイズも大きいため、そのまま使用せず一度リサイズしたりする事が多いかと思います。 アップロード後にサーバ側で処理するといった手法もあります
動画や画像ファイルのアップロード時に内容を表示する(Nuxt.js/Vuetify) - Qiita
<template> <v-row justify="center"> <v-col sm="12" md="11" lg="9" xl="6"> <v-sheet class="pa-3"> <h1>アップロードプレビューデモ</h1> <v-form ref="form"> <video v-if="uploadVideoUrl" controls> <source :src="uploadVideoUrl" /> このブラウザではビデオ表示がサポートされていません </video> <v-file-input v-model="input_video" accept="video/*" show-size label="動画ファイルをアップロードしてください" prepend-icon="mdi-video" @change="onVideoPicked" ></v-file-inp
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
