0

I have a canvas and I am drawing something to it and then I want to save that drawing into an image. I am successful in doing that but the image path I am getting is weird like data32... Is it possible to convert that url into a human readable url? 

function convertCanvasToImage(canvas) {
    var image = document.getElementById("postcar_image");
    image.src = canvas.toDataURL("image/png"); // here I am getting an encoded string of the image, what I want is to decode it on client side
    return image;
}
Liam
  • 27,717
  • 28
  • 128
  • 190
mohsinali1317
  • 4,255
  • 9
  • 46
  • 85
  • possible duplicate of [How To Save Canvas As An Image With canvas.toDataURL()?](http://stackoverflow.com/questions/10673122/how-to-save-canvas-as-an-image-with-canvas-todataurl) – Liam Apr 28 '14 at 10:00
  • that may not answer it actually, but your question is not clear. What are you doing now? What is the result? What do you mean by a *"human readable url"*? – Liam Apr 28 '14 at 10:03
  • For example, when I use canvas.toDataURL() I get something like this data:image/png;base64... I want to convert to some url like temp.png. – mohsinali1317 Apr 28 '14 at 10:06
  • @Liam i guess he means if he can change the image's name when the user is about to download it – Batu.Khan Apr 28 '14 at 10:06
  • No, I don't want to download it, what i want is to share this image on facebook but when I pass the value to facebook share it says 'picture URL is not properly formatted'. So I am guessing it has something to do with the image format. – mohsinali1317 Apr 28 '14 at 10:08
  • @user2613439, I repeat, what are you doing now? Without seeing your current code how are we supposed to suggest improvements! – Liam Apr 28 '14 at 10:09
  • Your question is still very unclear. The above code, saves a canvas element into the an image **in the users browser**. That's it! You're not going to have access to this to *"save to facebook"* (what ever that means). You've written a kids tricycle and your expecting it to work like a Super Car. – Liam Apr 28 '14 at 10:20
  • I don't know what you are not getting, if you can't help then pass on but there isn't any need to be rude. What I am trying to say is that that saved image in user browser have some encoded url can it be decoded? – mohsinali1317 Apr 28 '14 at 10:27
  • 2
    Yes, it can be done, but you'll need server side scripting as well. You should send that data32 image to the server, store it, and send back the url. If you're only working on the frontend, I'm afriad you're stuck with that image file name. Unless you only care about the file name for those who download the image, in that case you can use the download attribute http://stackoverflow.com/questions/10049259/change-name-of-download-in-javascript – Jonas Grumann Apr 28 '14 at 10:33

1 Answers1

1

The string that is returned is a so-called data-URI scheme. It do contain your image encoded as base-64 with a header (data:...) which allows it to be used as a uri for image src and so on. That string is as human readable URL as you can get binary data.

You can pass that data-uri directly as an image source (you can also paste that string in the address bar to test):

var myImage = new Image;
myImage.src = canvas.toDataURL();

This is the only way to get an image from canvas using native methods.

If you want to isolate the binary data you can cut off the header of that uri to get the image data itself - anything after the ..base64, is the image file itself encoded as base-64.

You need to manually decode the base-64 data though and the raw image file data is not so useful in itself, although you can load the data back as a Blob but this is meaningless in this context.

The point with a data-uri is be able to handle binary images with JavaScript as well as communicating with a server without running into encoding issues as all data is in a (human) readable ASCII range.

Community
  • 1
  • 1