将 html5 画布保存为服务器中的图像答案

【问题标题】：Save html5 canvas as image in server将 html5 画布保存为服务器中的图像
【发布时间】：2014-10-06 13:00:13
【问题描述】：

我有一个带有图像的 html5 画布。人们可以使用 javascript 编辑/调整图像。毕竟，他们必须可以选择在他们的 Facebook 墙上发布该图像。据我所知，我们可以满足这样的要求

Save Canvas data as image in to my server      -->     Post to Facebook with its image URL   -->    Delete the image on call back.

首先这个假设是正确的，其次是

如何在单击按钮时使用 javascript 将 HTML 5 Canvas 保存为 png 图像？有可能吗？

【问题讨论】：

标签： jquery html html5-canvas

【解决方案1】：

您可以使用 JavaScript 将画布保存为特定的图像格式

var mycanvas = document.getElementById("whatever"); //get your canvas
var image    = mycanvas.toDataURL("image/png"); //Convert the canvas to image, currently converting to .png

【讨论】：

+1 - 但值得注意的是，生成的图像是 base64 编码的，并且比二进制编码的 PNG 尺寸更大。在发送到 FB 之前，在服务器上对它进行原生编码也许是个好主意。
如果这样我不能上传到 facebook 吗？有什么问题吗？
@techfoobar 你能帮助一些如何在服务器中对图像进行本地编码吗？
@ramesh - 取决于您使用的服务器端技术（PHP、Java、Node.Js、ASP.NEt 等）。在任何情况下，您都可以使用 image magick 之类的东西以本机格式加载和保存图像（无论平台如何，我相信 image magcik 都可以作为可分叉的命令行进程使用）
嗨伙计们..还有一个疑问...如何通过单击按钮将创建的图像保存在服务器中？

【解决方案2】：

首先，您必须使用 Javascript 将图像转换为 base64 格式：

var canvas = document.getElementById("canvas");
var data = canvas.toDataURL("image/jpeg");

现在通过PHP转换成图片并保存到服务器

file_put_contents("myimage.jpg", base64_decode(explode(",", $_GET['data'])[1]));

就是这样

【讨论】：