CODEWITHSUNDEEP
jqueryimagehtmlcanvaskineticjs
Nyxynyx
Nyxynyx

Reputation: 63599

Image URL: data:image/png;base64 (KineticJS)

When using KineticJS to generate an image of the canvas, the function stage.toDataURL() gives me a URL that starts with data:image/png;base64 followed by a really long string!

Question: How does the URL work? It does not contain the web server address, does it actually retrieve the image from anywhere?

I would like to save this generated image to my webserver, is it a best practice to send this really long string to my server with a POST, and have the server curl this url?

URL

data:image/png;base64,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

Upvotes: 3

Views: 7734

Answers (1)

earino
earino

Reputation: 2935

I believe that is a URL in the "data URI scheme."

http://en.wikipedia.org/wiki/Data_URI_scheme

Their red dot example is good:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">

If you post the data, base64 decode it, and save it as a .png, it will be a valid png image.

Upvotes: 4

Related Questions