【JavaScript小ネタ】画像をBlob形式に変換する

サーバ上の画像をBlob形式で読み込みたい時は、fetch()を使えば簡単に実現できます。

サンプルコードはコチラです。

// 画像を取得してBlob形式に変換する
// "/sample.jpg"は取得する画像のURLなので適宜置換すること
fetch("/sample.jpg")
.then(function(response) {return response.blob()})
.then(function(blob) {
  // 変数blobに上記URLで指定した画像がBlob形式で格納されているので
  // ここにBlob形式でやりたい処理を書く
})

上記のfetch()での処理はPromiseを使った非同期処理となるので処理の順番等は各々ご注意ください。

参考
https://stackoverflow.com/questions/42471755/convert-image-into-blob-using-javascript