如何将HTML5画布另存为链接，以便其他人可以查看和共享
如何将HTML5画布另存为链接，以便其他人可以查看和共享
提问于 2013-01-27 20:04:31
我有一个应用程序，用户可以画图片，这一切都很好。我一直存在的问题是，我希望能够共享用户的绘图，这样其他人也可以看到和共享。到目前为止，我正在使用下面的代码来保存canvas：
window.location = canvas.toDataUrl();但这样做的问题是图片只在客户端生成，这是我不想要的。我没有与php/ mysql或服务器端语言的经验，但我有与html，css，javascript的经验。不管怎样..。任何帮助都将不胜感激
谢谢
回答 3
Stack Overflow用户
发布于 2013-01-27 20:11:47
你得到的结果是显而易见的。在HTML5 canvas中，您从javascript绘制的内容是在客户端完成的。因此，如果您想要共享绘图，您可以将其导出为图像This might help
希望我的回答能对你有所帮助。
Stack Overflow用户
发布于 2013-01-27 20:14:53
如果您希望用户通过指向您的页面的链接共享图像，则可能的方法是:将图像保存到具有唯一键的数据库中，用户可以使用该键与其他人共享。现在，您必须提供一个方法，该方法接受生成的密钥，从数据库加载图像并将其返回给客户端。
另一种方法是让用户有可能下载创建的图像，例如所有HTML5浏览器都支持的PNG格式。
Stack Overflow用户
发布于 2013-01-27 20:37:28
您只需在画布上调用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');
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14551640
复制
相似问题
如果输入被聚焦或输入包含任何文本，则移动文本
CSS输入框切断文本
为什么Safari & Firefox会切断输入文本的底部？
为什么移动Safari在输入表单中切断文本？
如果输入字段包含文本，则设置变量
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
