How to save and share canvas html5 image by saving as link? [duplicate]

问题

This question already has an answer here:

Closed 7 years ago.

Possible Duplicate:
Download canvas image on the fly

I have a canvas of HTML5 which is fully working. Now, I want to create a sort game, where people can save their image and share it with others. This can be done (I guess) by saving the image as a different url then the place where the canvas is. 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 truly on the server and get a link that I can share with my friends, so that they can see this image on the internet. How can I make this possible guys?

PS: I "save" 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>

回答1:

Yes. Basically the image you're generating is on the client. You'll need to take the Base64 encoded string and send that up to your server. Then on the server you can convert it into an image.

For that see: How to save a PNG image server-side, from a base64 data string

来源：https://stackoverflow.com/questions/12902190/how-to-save-and-share-canvas-html5-image-by-saving-as-link