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

Question

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

window.location = canvas.toDataUrl();

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

谢谢

Answer 1

您只需在画布上调用 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/

Answer 2

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

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

Answer 3

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