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...)
On Tuesday, March 24, 2015 at 8:14:49 PM UTC-7, Donald Salisbury wrote:
>
>
> 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
>
--
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to the Google Groups
"web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
For more options, visit https://groups.google.com/d/optout.
