[解決済み] HTML5 アップロード前に画像をプリリサイズする
2022-04-20 01:54:57
質問
麺のかき揚げはこちらです。
HTML5のローカルストレージやxhr v2などがあることを念頭に置いています。この質問に対して、どなたか動作する例を見つけられるか、あるいはイエスかノーかを教えていただけないかと思います。
新しいローカルストレージ(またはその他)を使用して、画像をあらかじめサイズ調整することは可能ですか?そうすれば、画像のサイズ調整の手がかりを持たないユーザーが、10MBの画像を私のウェブサイトにドラッグして、新しいローカルストレージを使用してサイズを調整し、その後、小さいサイズでアップロードすることができます。
Flash、Javaアプレット、Active Xでそれができることはよく分かっています。問題は、Javascript + Html5でできるかどうかです。
この件についての反応を楽しみにしています。
とりあえずタ。
解決方法は?
そうです。 ファイルAPI で画像を処理すれば、その画像は canvas 要素 .
このMozilla Hacksのブログ記事 は、このプロセスのほとんどを説明しています。 参考までに、このブログの記事から組み立てたソースコードを以下に示します。
// from an input element
var filesToUpload = input.files;
var file = filesToUpload[0];
var img = document.createElement("img");
var reader = new FileReader();
reader.onload = function(e) {img.src = e.target.result}
reader.readAsDataURL(file);
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var MAX_WIDTH = 800;
var MAX_HEIGHT = 600;
var width = img.width;
var height = img.height;
if (width > height) {
if (width > MAX_WIDTH) {
height *= MAX_WIDTH / width;
width = MAX_WIDTH;
}
} else {
if (height > MAX_HEIGHT) {
width *= MAX_HEIGHT / height;
height = MAX_HEIGHT;
}
}
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);
var dataurl = canvas.toDataURL("image/png");
//Post dataurl to the server with AJAX
関連
-
[解決済み] .swfビューアから画像を抽出する?
-
[解決済み] HTML5のlocalStorageにオブジェクトを格納する方法は?
-
[解決済み] AndroidのListViewで画像を遅延ロードする方法
-
[解決済み] div' コンテナに合わせて画像を自動リサイズするにはどうしたらいいですか?
-
[解決済み] HTML5の数値入力のスピンボックスを非表示にすることはできますか?
-
[解決済み] HTML5でfloat入力タイプはありますか?
-
[解決済み] HTMLでBase64画像を表示する方法
-
[解決済み] CSSによる画像の強制リサイズとアスペクト比の保持
-
[解決済み] HTML5 ローカルストレージとセッションストレージの比較
-
[解決済み】HTML5入力のプレースホルダの色をCSSで変更する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Matlabでどのようにimwarp転送ポイント?
-
[解決済み] Matlabでアフィン変換
-
[解決済み] HAMLを使って、コンテンツに画像を追加するには?
-
[解決済み] Goで生成されたアニメーションGIFがウィンドウズで動かない
-
[解決済み】CSS3 回転アニメーション
-
[解決済み】Kubernetesにイメージの再引き取りを強制する方法は?
-
[解決済み】FFmpegで画像から動画を作成する方法は?
-
[解決済み] SVGはビットマップイメージの埋め込みに対応していますか?
-
[解決済み] node.jsとexpressを使った画像のアップロード、表示、保存の方法【終了しました
-
[解決済み] アップロード前に画像のサイズを変更するためにHTML5を使用する