Javascript 通过ajax传递画布数据

我有一个应用程序可以将画布数据即时保存到服务器。我的要求是每秒导出画布数据，通过ajax将其保存到服务器，并通过ajax将相同的数据导入到另一个浏览器中的另一个画布。我正在使用jqueryforajax。我使用以下代码来传递数据

function sendCanvasData() {
    var data = '';
    var ctx = document.getElementById('imageView').getContext('2d');
    data = ctx.getImageData(0, 0, 250, 250);
    $.post("canvas.php", {
        cdata: data
    });
}

---

但它会向服务器传递一个空值。我如何才能做到这一点？

您可以获取此图像的数据URL

document.getElementById（'imageView'）.toDataURL（'image/png'）

返回值将是PNG格式的Base64编码图像数据。您可以将此数据上载到服务器。 您还可以向客户端显示此数据，而无需进行任何转换或转换（

）

从服务器加载此数据时，只需解码图像并将其放在画布上：

var img = new Image();
img.onload = function () {
  canvas.getContext('2d').drawImage(this, 0, 0);
}
img.src = base64EncodedData;

---

谢谢Gleb，但我想在另一个画布中显示图像，而不是图像。我尝试了您的脚本，我可以通过ajax传递它，但无法在其他画布中显示它。有没有其他解决方案可以在画布上显示它？在这方面，您始终可以从base64编码的数据构造图像并将其放在画布上。