Save html5 canvas output to my rails app
I am trying to save the content of a html5 canvas in my Rails application. I found
var url = canvas.toDataURL('image/png');
but I can't figure out how to get this into my post / form.
I am using a carrier for image processing, but instead of loading the image, I want the user to draw it to the canvas.
I was thinking about something like setting a form input file to this content, but it doesn't seem to work the way it does
Or maybe I shouldn't use the carrier wave?
thank
source to share
The accepted answer didn't cover the carrier part, so here's how it works the way I work in my application:
In my profile_images_contoller.rb I added the following features:
# 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
Then in my "create" action I passed convert_data_uri_to_upload (params [: profile_image]) to 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
Source: http://www.davehulihan.com/uploading-data-uris-in-carrierwave/
source to share