♾
JavaScriptでdata URLとblobを相互に変換する方法
この記事について
この記事ではブラウザ側のJavaScriptでdata URLとblobを相互に変換する方法について紹介します。
ソースコードについては この記事のGistページ からダウンロード可能であり、結果については デモ からご確認可能です。
おおまかな手順
おおまか手順を下記に示します。
- コーディング
- 動作確認
コーディング
ターミナルで下記のコマンドを実行してコーディングの準備をします。
mkdir nodejs-big-number
cd nodejs-big-number
npm init -y
npm install --save big.js
touch index.html main.js
index.html
エディタでindex.htmlを開いて下記の内容を入力します。
main.js
エディタでmain.jsを開いて下記の内容を入力します。
ポイントを下記に示します。
- convertBlob関数はblobをdata URLに変換する関数です。FileReaderはBlob型やFile型のオブジェクトをdata URLやArrayBufferとして読み込むためのクラスです。FileReaderにはabort（読み込み中止）、error（エラー発生）、load（読み込み完了）の3つのイベントがあるので、それぞれのイベントハンドラと登録／解除のためのsubscribe関数とunsubscribe関数を定義しています。それぞれのイベントの発生時にはunsubscribe関数を呼び出してイベントハンドラの解除しています。
- convertDataUrl関数はdata URLをblobに変換する関数です。fetch関数を使ってResponseオブジェクトに変換した後にblobメソッドを呼び出してblobに変換しています。いずれもasync関数なのでawaitを2つ必要とします。
動作確認
ターミナルで下記のコマンドを実行してWebサーバーを起動します。
npx http-server -c-1
ブラウザで http://localhost:8080/ にアクセスします。
Webページには下記のリンク3点が含まれています。
- オリジナルのblobデータ
- blobからdataURLへの変換結果
- dataURLからblobへの変換結果
上記のリンクをクリックして内容が下記であることを確認します。
Blob
参考にしたWebページ
この記事を書くために参考にしたWebページを下記に示します。
おわりに
この記事を作成している時に知ったこと2点を下記に示します。
- Google Chromeではdata URLを新しいタブで開けないのでa要素のdownload属性を使うなどして対応する必要がある。
- Google ChromeではWebページをファイルとして開くとfetchする時にエラーが発生するのでnpmのhttp-serverなどを使う必要がある。と思っていたけれど再現しようと思ってもう1回やってみたら大丈夫だった。何を間違えたのだろう...
どうでも良いことですがblobとタイプする時にblogとタイプしてしまうのは私だけでしょうか。blobからdata URLに変換する方法（FileReaderを使う方）は毎回「コード量が多くて面倒」と感じているので何か良い方法をご存知の方がいましたらご指導をお願いできれば幸いです。最後までお読みいただきありがとうございました！
Discussion