1

モデルアイテムの編集ビューで画像を操作するために Caman JS を使用しています。

$('#vintage').click(function() {
  Caman("#preview_image", function () {
    this.reset();
    this.crossProcess(100)
    this.render(function () {
      this.addClass('selected');
    });
  });
});

Caman JS は、Canvas オブジェクトの base64 値を取得するオプションを提供してくれます

var dataURL = this.toBase64();

しかし、私は今、この情報をどうするかについて行き詰まっています。理想的には、Rails フォームを送信するときに元の画像を上書きしたいと思います。

どんな提案も素晴らしいでしょう。

4

1 に答える 1

8

わかりました、解決策を見つけました。ここにあります...

base64 データを値として隠しフィールドを作成する

<input id="base64" type="hidden" value="" name="base64"/>
var dataURL = this.toBase64();
$('#base64').val(dataURL)

次に、これをコントローラーで処理しました。

unless params[:base64].empty?
  data =  params[:base64]
  image_data = Base64.decode64(data['data:image/png;base64,'.length .. -1])
  File.open("#{Rails.root}/public#{@item.image.url.to_s}", 'wb') do |f|
    f.write image_data
  end
  // Carierwave method to regenerate thumbnails
  @item.image.recreate_versions!
end

誰かを助けるかもしれません.

于 2013-08-21T21:17:21.507 に答える