Best method for storing images from base64 data?

[Donald Salisbury]

Hi there,  

I have an image sharing app, and am looking for advice on how to implement our image storage in fast (enough) and scalable way that will allow for client-side editing.  I want to reduce large images uploaded client side before sending them to the server.  Currently our app functions nicely using image file uploads,  but is getting bogged down by large image uploads,  so I look to accommodate image editing without rearranging too much of our existing code.   I want to resize images client side to have the option of adding additional editing options later.  

So far I reduce the images to acceptable sizes using JS + HTML5 canvas then send base64 encoded data to the controller.  I am hoping for a way to save this base64 encoded data as an image file and just upload it the same way we are uploading image files currently.  I have tried several methods without success so I am hoping for some insight into the best approach before continuing down the wrong path.  

#on client-side

resample(canvas);

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

var fd = new FormData();

                fd.append('name', 'img_data')

                fd.append('filename', file_name);

                fd.append('file', resize);

                var xhr = new XMLHttpRequest();

                xhr.open("POST", "{{=URL('default','update_profile')}}");

                xhr.send(fd);

#in models

db.define_table('image',

                Field('img','upload'))

# how it works with image file uploads

# currently in controllers 

data = request.vars

if data['is_img']:

     img_id = db.image.insert(img = db.image.img.store(d.file, d.filename))

# I have tried:

# following a similar post that was unanswered

image = str(data.file)[str(data.file).find(",")+1:]

im = Image.open(BytesIO(base64.b64decode(image)))

im.save(data.filename)

 img_id = db.image.insert(img = db.image.img.store(im, d.filename))

This last code block doesn't give any warnings, but also doesn't save the file.

Thank you for your response!

 keywords blob, base64, image file, html5 canvas

[Derek]

I was just looking at this today. No, you don't get anything out of that because you have to process the dataurl from the canvas, because it's not really base64, it's base64 dataURL...

first, you remove this from the file:

data:image/png;base64,

including the last comma.

Then, you convert the spaces to plus signs '+'. (I'm not seeing you do this)

Then and only then can you b64decode the image...

So, if the last code block doesn't even create a file, you have problems in your file handling, which I would not be able to assist you with. I'm assuming that the b64decode can't decode because it has spaces (although spaces are generally ignored, but you might need them...)