将画布数据发送到服务器

Question

我的网页上有一个画布。这里用户绘制图像。现在，当用户单击提交按钮时，我希望浏览器将画布数据与其他字段一起发送。
是否可以发送画布数据。如果是的话怎么样？

Answer 1

canvas.toDataURL("image/png");

将您的图像数据作为数据返回：URI
您可以将其设置为隐藏字段并随表单一起提交 或者您可以通过AJAX请求发送它。

您可以使用URI创建另一个图像，并重绘图像

var imageURI = ...
// TODO: get the URI
var context = canvas.getContext('2d');
var img = new Image();
img.onload = function() {
  ctx.drawImage(img,0,0);
}
img.src = imageURI;