jquery - 将 html5 画布保存为服务器中的图像

Question

我有一个带有图像的 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 图像？是否可以 ？

Answer 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

Answer 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]));

就这样