将 html5 画布输出保存到我的 rails 应用程序答案

【问题标题】：save html5 canvas output to my rails app将 html5 画布输出保存到我的 rails 应用程序
【发布时间】：2012-02-02 16:07:05
【问题描述】：

我正在尝试将 html5 画布的内容保存到我的 Rails 应用程序中。我找到了

var url = canvas.toDataURL('image/png');

但我不知道如何将其放入我的帖子/表单中。

我使用carrierwave 来处理图像，但我希望用户在画布上绘制一个图像，而不是上传图像。

我正在考虑将表单的输入文件设置为此内容，但这似乎不是它的工作方式

或者我不应该使用载波？

谢谢

【问题讨论】：

标签： ruby-on-rails html5-canvas carrierwave

【解决方案1】：

只需将 url 的内容放在隐藏字段中即可。

<input type="hidden" name="canvascontent" id="canvascontent" />

在 javascript 中（使用 jquery）：

var url = canvas.toDataURL('image/png');
$("#canvascontent").val(url);

【讨论】：

它确实在正确的字段中获取了我的字节，但 Carrierwave 似乎没有接收到它，并且没有任何内容保存到数据库中。

【解决方案2】：

接受的答案没有涵盖载波部分，所以我在我的应用程序中使用它：

在我的 profile_images_contoller.rb 中，我添加了以下函数：

# Convert base64 to binary
def split_base64(uri_str)
  if uri_str.match(%r{^data:(.*?);(.*?),(.*)$})
    uri = Hash.new
    uri[:type] = $1 # "image/gif"
    uri[:encoder] = $2 # "base64"
    uri[:data] = $3 # data string
    uri[:extension] = $1.split('/')[1] # "gif"
    return uri
  else
    return nil
  end
end

# Convert data uri to uploaded file. Expects object hash, eg: params[:profile_image]
def convert_data_uri_to_upload(obj_hash)
  if obj_hash[:remote_image_url].try(:match, %r{^data:(.*?);(.*?),(.*)$})
    image_data = split_base64(obj_hash[:remote_image_url])
    image_data_string = image_data[:data]
    image_data_binary = Base64.decode64(image_data_string)

    temp_img_file = Tempfile.new("data_uri-upload")
    temp_img_file.binmode
    temp_img_file << image_data_binary
    temp_img_file.rewind

    img_params = {:filename => "data-uri-img.#{image_data[:extension]}", :type => image_data[:type], :tempfile => temp_img_file}
    uploaded_file = ActionDispatch::Http::UploadedFile.new(img_params)

    obj_hash[:image] = uploaded_file
    obj_hash.delete(:remote_image_url)
  end

  return obj_hash    
end

然后在我的“创建”操作中，我将 convert_data_uri_to_upload(params[:profile_image]) 传递给 ProfileImage.new()

def create
  @profile_image           = ProfileImage.new(convert_data_uri_to_upload(params[:profile_image]))
  @profile_image.imageable = @imageable

  respond_to do |format|
    if @profile_image.save
      format.html { redirect_to @entity_redirect_edit_path, notice: 'Profile image was successfully created.' }
      format.json { render json: @profile_image, status: :created, location: @profile_image }
    else
      format.html { render action: "new" }
      format.json { render json: @profile_image.errors, status: :unprocessable_entity }
    end
  end
end

来源：http://www.davehulihan.com/uploading-data-uris-in-carrierwave/

【讨论】：