将html5canvas输出保存到我​​的rails应用程序

我试图将html5canvas的内容保存到我的Rails应用程序。 我找到了

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

但我无法弄清楚如何进入我的post/表格。

我使用carrierwave处理图像但不是上传图像我希望用户在canvas上绘制一个。

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

或者也许我不应该使用载波？

谢谢

Answer 1

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

在javascript（使用jquery）：

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

Answer 2

接受的答案没有涵盖了载波部分，所以这里就像我在我的应用程序中工作一样：

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

 # 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/