如何将 HTML5 画布保存为链接，以便其他人可以查看和共享答案

【问题标题】：How to save HTML5 canvas as a link so other people can see and share如何将 HTML5 画布保存为链接，以便其他人可以查看和共享
【发布时间】：2013-01-28 04:37:28
【问题描述】：

我有一个用户可以绘制图片的应用程序，这一切都很好。我一直遇到的问题是我希望能够共享用户的绘图，以便其他人也可以看到和共享。截至目前，我正在使用此代码来保存画布：

window.location = canvas.toDataUrl();

但是这样做的问题是图片只在客户端生成，这是我不想要的。我没有使用 php/mysql 或服务器端语言的经验，但我确实有使用 html、css、javascript 的经验。无论如何...任何帮助将不胜感激

谢谢

【问题讨论】：

我认为您将不得不涉及数据库。 html5rocks.com/en/tutorials/webdatabase/todo

标签： php html canvas

【解决方案1】：

你得到的结果是显而易见的。在 HTML5 画布中，您从 javascript 中绘制的内容是在客户端完成的。因此，如果您想共享绘图，您可以将其导出为图像 This might help

希望我的回答对你有所帮助。

【讨论】：

【解决方案2】：

如果您希望用户通过指向您页面的链接共享图像，可能的方法是：将图像保存到具有唯一键的数据库中，用户可以使用该键与其他人共享。现在您必须提供一个方法来接受生成的密钥，从数据库加载图像并将其返回给客户端。
另一种方法是让用户可以下载创建的图像，例如作为 PNG，所有 html5 浏览器都支持。

【讨论】：

是的，在我的应用程序中，用户可以选择将他/她的作品下载到计算机上。我要问的是，当用户点击保存按钮时，它会生成一个如下所示的网址：www.example.com/1234567 唯一的问题是，我认为 javascript 不允许这种情况发生，而且我不会对 php 等服务器端语言有丰富的经验。

【解决方案3】：

您可以在画布上调用 toDataURL，您将获得一个 base64 编码的图像，可以将其传递到浏览器地址栏以呈现图像。

var ctx = document.getElementById("canvas").getContext("2d");
var image = document.getElementById("someImage");
ctx.fillRect(100,100,100,100);
image.src = canvas.toDataURL("image/png");

var link = document.getElementById("link");

link.addEventListener('click', function(){
    window.open(canvas.toDataURL("image/png"), '_blank');
});

http://jsfiddle.net/LvZQF/

【讨论】：