如何保存和共享画布html5图像通过保存为链接？ [英] How to save and share canvas html5 image by saving as link?

问题描述

可能重复：

下载画布图片即时

HTML5 的画布完全正常工作。现在，我想创建一个排序游戏，人们可以保存他们的形象，并与他人分享。这可以做（我猜）通过保存图像作为一个不同的URL，然后是地方的画布是。现在，如果我保存我的HTML5画布，我在浏览器中获得这个URL：

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：我用这个片段保存它：

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>

推荐答案

基本上，你生成的图像是在客户端上。您将需要采用Base64编码字符串并将其发送到您的服务器。然后在服务器上，您可以将其转换为图像。

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

这篇关于如何保存和共享画布html5图像通过保存为链接？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！