Question

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

window.location = canvas.toDataUrl();

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

感谢

Answer 1

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

希望我的回答可以帮到你。

Answer 2

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

Answer 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/

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

3 个答案: