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 ?

WKx
  • 401
  • 4
  • 15
  • @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. – WKx Aug 27 '15 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. – WKx Aug 28 '15 at 02:51

1 Answers1

0

Sorry, try this:

image.src = 'data:image/png;base64,'+yourBase64;
Juan
  • 2,156
  • 18
  • 26
  • 1
    _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_ – Andreas Aug 27 '15 at 06:10
  • I eddited my first answer, sorry, I''ve seen this in few examples: http://stackoverflow.com/questions/21227078/convert-base64-to-image-in-javascript-jquery – Juan Aug 27 '15 at 06:11
  • @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) – WKx Aug 27 '15 at 10:56