Working with HTML5 I came across CANVAS API. So first suppose I draw or render a picture on CANVAS in HTML5 and with little bit JS we get a dataURL of our files which may be used as a permalink across any browser sipporting HTML5 (as just facebook favicon does). How these data URLs are processed and how they are created so that it works as an encrypted data for your files. Please let me anyone understand the fact. It is however the coolest thing in HTML5 for me.

1 Answer 1


when your browser requests and HTML page that has an <img> element, it extracts the link of the image (the value of the src attribute of that element) and makes a new HTTP request to get that image file, then renders it accordingly. browsers essentially know how to process and render images.

data URIs enable you to minimize the number of HTTP requests sent by the browsers in this case by embedding image binary data into HTML pages.

in other words, instead of having the browser make a separate request to get an image from the server, this image can be part of the HTML page itself.

the data in a data URI is not encrypted data. it could be encoded into base64 format.

  • Oh! That was really awesome and yes I have seen that data URIs start as data:image/png;base64, ....like that. Anyway thank you for your answer. By the way is it possible to decode the base 64 string. If yes then how? Using decodeURIComponent() or something else?
    – Vk Choubey
    Jun 30, 2015 at 3:28
  • @VkChoubey if you wanna use JavaScript to decode base64, see developer.mozilla.org/en-US/docs/Web/API/WindowBase64/…! if that answers your question, you may accept the answer to mark your question as solved! thanks!
    – kzidane
    Jun 30, 2015 at 3:50
  • Okay! Thanks for your response ...
    – Vk Choubey
    Jun 30, 2015 at 3:52

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .