2

I have a canvas that I would like to upload as an image file to a server.

I can convert the canvas to a Base64 string, but couldn't figure out how to create an image file from there ( so once uploaded to the server it can be accessed directly by url in a img src).

Note : All the server do is save the uploaded data to a file, so the conversion must be done client side in javascript

Any ideas ?

Improve this question
2
  • @Andreas, thanks, I actually tried with the Canvas.toBlob() function but the binary I get is not a jpeg file. I will try with the function in the post see if the binary string can be opened as a jpeg. Commented Aug 27, 2015 at 10:54
  • for future reference, follow the link for a function to convert base64 -> blob. For some reason the mozilla's toBlob funciton does not seem to create a valid jpeg binary. Commented Aug 28, 2015 at 2:51

1 Answer 1

Reset to default
0

Sorry, try this:

image.src = 'data:image/png;base64,'+yourBase64;
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

so once uploaded to the server it can be accessed directly by url in a img src + All the server do is save the uploaded data to a file, so the conversion must be done client side in javascript
I eddited my first answer, sorry, I''ve seen this in few examples: stackoverflow.com/questions/21227078/…
@Juan, thanks but I actually need the src to be the URL of the file. With this solution, i'd have to retrieve the file content first with an ajax request and then add the string to the src. (this is one ajax request i don't need)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.