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

Question

我正在使用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();

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

任何建议都会很棒.

Answer 1

好的,我找到了解决方案.这里是...

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

可能会帮助某人,我仍然愿意接受更好或更有效的方法来做到这一点.