プログラミング歴3ヶ月の初心者です。
canvasで作成した画像をfileとしてサーバーにuploadし、
ファイルの公開パスを返してog:imageに設定し、SNSへ投稿できる機能を実装したいです。
canvasで作成した画像をBase64へ変換するところまでおこなったのですが、
その後、サーバーへアップする方法について調べています。
下記の記事ではサーバーへアップする手法が3つ紹介されていたのですが
下記はそれぞれどのようなメリットデメリットがあるのでしょうか？
また、どの方法で実装するのが望ましいでしょうか？
・Base64のまま送信する
・Binaryに変換して送信する
・Blobに変換して送信する
参考：https://qiita.com/0829/items/a8c98c8f53b2e821ac94
どなたがご教授いただけますと幸いです。
Binary（ArrayBuffer）に変換する方法はBlobと大きな差はなく、実装が面倒なので除外します。
Base64
・メリット → 文字列なので扱いやすい。そのままアドレスバーに貼れば中身が見れるのでフロントではデバッグが楽。そのままJSONに入れたりLocalStorageに保存できる
・デメリット → バイナリ（Blob）と比べサイズが1.33倍になり通信量が増える。ファイルとして保存するなら結局バイナリへの変換が必要
Blob
・メリット → Base64に比べサイズが小さく通信量が抑えられる。そのままファイルとして保存できる
・デメリット → バイナリなので扱いづらい。フロントではデバッグしづらい
フロントで完結する作業ならBase64も使いますが、サーバーに送ることを考えると個人的にはBlobの方が好みです。軽いので。
現在ではtoBlob()が使えるので（Base64を経ずに）Blobにしてサーバーに送るのがいいんじゃないでしょうか。こんな感じで。
canvas.toBlob((blob) => {
const formData = new FormData();
formData.append('image', blob);
fetch('http://localhost/image', {
method: 'POST',
body: formData
});
});
（動作テストしていないコードです。あとIE11ではtoBlobもfetchもないので動きません）
参考
HTMLCanvasElement.toBlob() - Web API | MDN
HTMLCanvasElement API: toBlob - Can I use
async, awaitについての知識があるならこちらも参考になると思います。
html5-canvas-fetch.js · GitHub
@rarala2020
Questioner