大きな画像をJavaScriptでリサイズしてからAjax送信する方法
さてさて、この間 wordpressみたいなドラッグ・アンド・ドロップをVueで実装という記事を公開しました。この記事の目的はユーザビリティだったのですが、ドラッグ＆ドロップ機能の先では画像のアップロードを想定していました。 最近のウェブサイトでは画像をサーバーへ保存するというのは珍しいことではないでしょうが、実はアップロードする側の状況が変化してきたことである問題が発生するようになってきました。 それが・・・ スマホ・カメラの高解像度化のせいで画像アップロードに時間がかかってしまう というものです。 つまり、サイズが大きなファイルをアップロードするのに時間がかかってしまうということですね。 特にまだ日本のウェブサイトは、以下のように確認ページを挟む場合も多く存在していますので、その場合（バリデーションを厳密にするなら）画像サイズが大きい場合は１番と２番で画像をアップロードする必要がでてき
JavaScriptでData URIからBlob(File)を作成する方法
2017/07/29 JavaScriptで、base64エンコードされたData URIの文字列からBlob(File)を作成する方法を紹介します。例えば、localStorageなどで画像をData URIで保存させて再訪時に取り出す時、Blobに変換して扱えたら何かと便利なことが多いです。 サンプルコード// 対象の文字列 var dataURI = "data:image/png;base64,iVBORw..." ; // "iVBORw..."をバイナリに変換 var byteString = atob( dataURI.split( "," )[1] ) ; // "image/png" var mimeType = dataURI.match( /(:)([a-z\/]+)(;)/ )[2] ; // バイナリからBlobを作成 for( var i=0, l=byteSt
JavaScript で画像をローカルにダウンロード
目次はじめにTL;DR環境・条件詳細完成形解説ボタン追加: addImageDownloadButton画像リクエスト: downloadImage画像保存: downloadImageToLocal参考: axios を使う場合まとめ参考文献 環境・条件Google Chrome バージョン: 79.0.3945.88（Official Build） （64 ビット） 詳細「いらすとや トップページのロゴ画像をダウンロード」を例にダウンロードボタンを作る。 完成形先に完成形。 // ダウンロードボタンを追加 function addImageDownloadButton() { document.body.insertAdjacentHTML( "afterBegin", `<button id="download">ロゴ画像ダウンロード</button>` ); document.ge
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://www.web-development-kb-ja.site/ja/javascript/%E3%83%87%E3%83%BC%E3%82%BFuri%E3%82%92%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AB%E5%A4%89%E6%8F%9B%E3%81%97%E3%81%A6%E3%81%8B%E3%82%89formdata%E3%81%AB%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B/971681392/
