Convert base64 image to StringIO for Carrierwave

Question

I am hoping someone can help me understand this. I have a base64 string for an image:

"data:image/jpeg;base64,/9j/4AAQSkZJRgABA..."

I would like to send it using ember's createRecord and commit():

this.get('store').createRecord(Emb.Painting, {name: newName, image: newImage});

Then I want to convert it to StringIO for carrierwave and save it:

StringIO.class_eval { def original_filename; "stringiohaxx.jpg"; end }
io = StringIO.new(Base64.decode64(params[:painting][:image]))
@painting =  Painting.create(:name => params[:painting][:name], :image => io )

An image is saved. The image is always corrupted. Do I need to break my break my base64 string into:

data: '/9j/..'
type: 'image/jpeg'

? Any help appreciated.

Answer 1

And yes that string does need to be broken up:

var data = newImage.split(',');  
this.get('store').createRecord(Emb.Painting, {name: newName, image: data[1]});  

I doubt this is the best way...

Answer 2

Yes, you need to split the string. You could use something like this:

def splitBase64(uri)
  if uri.match(%r{^data:(.*?);(.*?),(.*)$})
    return {
      type:      $1, # "image/png"
      encoder:   $2, # "base64"
      data:      $3, # data string
      extension: $1.split('/')[1] # "png"
      }
  end
end

Then you can decode the image...

base64image = params[:painting][:image]
imageDataString = splitBase64(base64image)[:data]
imageDataBinary = Base64.decode64(imageDataString)

Then you can pass the imageDataBinary to StringIO.new() and the resulting image should be valid.