RailsでHTML5のCanvasの画像をDBに保存する方法

お絵かきサイトもどきを作ろうと思い、調べてみました。

Form側

new.html.erb

<canvas id="draw-area" width="257" height="257"></canvas>
<%= form_for @picture do |f| %>
    <%= f.text_field :name %><br>
    <%= f.file_field :photo %>
    <%= f.hidden_field :image_url, :value => '' %>
<% end %>
<span id="save-button">保存</span>

pictureモデルを用意し、hiddenフィールドでimage_urlフィールドを用意する。
（nameやphotoは無くても良いかも）

CoffeeScript側

pictures.coffee

  canvas = $('#draw-area')

  #お絵かき処理は省略・・・

  #保存ボタン押下時にhiddenフィールドに画像のURLを持たせ、Postアクションを呼ぶ
  $("#save-button").click ->
    url = canvas[0].toDataURL()
    $("#picture_image_url").val(url)
    $("#new_picture").submit()

Controller側

pictures_controller.rb

  def create
    @picture = Picture.new(picture_params)
    @picture.image_url = params['picture']['image_url']
    if @picture.save
      redirect_to @picture, notice: '保存しました。'
    else
      render :new
    end
  end

  def picture_params
    params.require(:picture).permit(:name, :photo, :image_url)
  end

簡単ですが、上記の方法で出来ました。
他にも色々方法があると思います。
DBにはバイナリで登録されているので、
実際に表示する場合はまた別途コンバートする必要あり。