将画布数据发送到服务器

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;