使用Rails在表单提交时将画布保存到服务器上的图像

时间:2013-08-21 18:39:10

标签: ruby-on-rails canvas camanjs

我正在使用Caman JS在我的编辑视图中操作模型Item的图像。

$('#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();

但是我现在有点不知道如何处理这些信息。理想情况下,我想在提交我的铁轨表格时覆盖原始图像。

任何建议都会很棒。

1 个答案:

答案 0 :(得分:6)

好的,我找到了一个解决方案。这是......

使用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

可以帮助别人,我仍然愿意接受更好或更有效的方法来做这些建议。