How to save and post an html5 canvas image while keeping the link?
Possible duplicate:
Load image to canvas on the fly
I have canvas
HTML5 that works completely. Now I want to create a sorting game where people can save their image and share it with others. This can be done (I think) by saving the image as a different url and then where the canvas is located. Right now, if I "save" my HTML5 canvas, I get this URL in the browser:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAiYAAAHCCAYAAADb8wJPAAAeKklEQVR4nO3d36tv6V0f8M+fkItceFGKIAiC4EVpwateFQSvAm0g1Is2
So now I want to save it on a server and get a link that I can share with my friends so they can see this image on the internet. How can I make these possible guys?
PS: I "saved" it with this snippet:
<input type="button" id="save" value="Save to PNG">
<script>
document.getElementById('save').onclick = function () {
window.location = document.getElementById("RoCanvas").toDataURL('image/png');
};
</script>
source to share
Yes. Basically the image you create is on the client. You will need to take Base64 encoding and send it to your server. Then on the server, you can convert it to an image.
For that see How to save a PNG image server side, from a base64 data string
source to share