[解決済み】BLOBをBase64に変換する
2022-04-07 01:05:56
質問
これは、私がやりたいコードのスニペットです。
Blob
から
Base64
の文字列を表示します。
このコメント部分が動作し、これによって生成されたURLをimg srcに設定すると画像が表示されること。
var blob = items[i].getAsFile();
//var URLObj = window.URL || window.webkitURL;
//var source = URLObj.createObjectURL(blob);
//console.log("image source=" + source);
var reader = new FileReader();
reader.onload = function(event){
console.log(event.target.result)
}; // data url!
var source = reader.readAsBinaryString(blob);
問題は下のコードで、生成されたソース変数がNULLであることです。
更新してください。
上記のコードのように、BlobファイルからBase64文字列を作成できるように、JQueryでこれを行う簡単な方法はありますか?
解決方法は?
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function() {
var base64data = reader.result;
console.log(base64data);
}
を形成します。
ドキュメント
readAsDataURL
base64にエンコードする
として
await
できる機能です。
function blobToBase64(blob) {
return new Promise((resolve, _) => {
const reader = new FileReader();
reader.onloadend = () => resolve(reader.result);
reader.readAsDataURL(blob);
});
}
注:Base64エンコードされたデータの前にあるData-URL宣言を最初に削除しないと、Blobの結果を直接Base64としてデコードすることはできません。Base64エンコードされた文字列のみを取得するには、まずdataを削除してください。 / ;base64、結果から。
関連
-
[解決済み】SyntaxError: 'import' と 'export' は 'sourceType: module' とだけ表示されるかもしれない - Gulp
-
[解決済み] JavaScriptで文字列をbooleanに変換するにはどうしたらいいですか?
-
[解決済み] JavaScriptで文字列を整数に変換する方法は?
-
[解決済み] JavaScriptで10進数から16進数へ変換する方法
-
[解決済み] jQueryでフォームデータをJavaScriptオブジェクトに変換する
-
[解決済み] JavaScriptでUnixのタイムスタンプを時刻に変換する
-
[解決済み] JavaScript の文字列をすべて小文字に変換する
-
[解決済み] JSオブジェクトをJSON文字列に変換する
-
[解決済み】JavaScriptで文字列をBase64にエンコードするにはどうすればいいですか?
-
[解決済み】JavaScriptでBase64文字列からBLOBを作成する場合
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Heroku:ノードアプリで「このアプリにはデフォルトの言語が検出されませんでした」エラーがスローされる
-
[解決済み】JavaScriptのisset()に相当するもの
-
[解決済み】webpack-dev-serverにリモート接続すると、「Invalid Host header」というメッセージが表示されます。
-
[解決済み】XMLHttpRequestモジュールが定義されていない/見つからない
-
[解決済み】別のjsファイル内でJavaScriptの関数を呼び出す
-
[解決済み] [Solved] Uncaught TypeError: nullのプロパティ 'appendChild' を読み取ることができない。
-
[解決済み】React、Uncaught ReferenceError。ReactDOMは定義されていません
-
[解決済み】FirefoxでGoogle Maps V3をリモートで使用すると「googleが定義されていません」と表示される。
-
[解決済み】ES6マップオブジェクトをソートすることは可能ですか?
-
[解決済み] オブジェクトURLからファイルやブロブを取得する方法は?