目的
javascriptで画像を生成し、それをサーバに保存する場合色々ハマったのでメモ
流れ
サーバサイドでblobに変換する形
- html2canvasで画像を生成
- canvasからcanvas.toDataURL()でbase64データを抽出
- javascriptでajaxを用いて送信 or textfieldでbase64を送信
- サーバでbase64からblobに変換
クライアントサイドでblobに変換する形
「Canvas上のイメージを画像ファイルとして保存する方法」
引用：https://st40.xyz/one-run/article/133/
- CanvasからBase64データを取得
- Base64データからBlobデータに変換
- a要素を使ってファイルダウンロード
気をつけないといけないところ
canvas.toDataURL() はbase64データ
canvas.toDataURL()で取得するデータはbase64の状態。
carrierwaveはbase64だと保存できない
carrierwaveはbase64だと受け付けないためblobに変換する必要がある。
html2canvasで画像生成-パターン1-
base64からblobに変換
なぜ変換が必要か？
carrierwave経由で画像を保存したいがcarrierwaveはbase64を受け付けない。
blobに変換させないでbase64でuploadできるようにする
「[rails]base64エンコードされた画像をcarrierwaveに保存する」
https://blog.hello-world.jp.net/ruby/2281/
この記事では
- app/controllers/concerns以下に共通のメソッドを作る
- そのメソッドでbase64でもuploadできるようにする
html2canvasで画像生成-パターン２-
ajaxを用いて送信する
「Canvasに描画した画像をjQuery.ajaxでサーバーに保存する : JavaScript」
https://www.findxfine.com/programming/javascript/995557527.html