Question

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

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

但它将空值传递给服务器。我怎么能这样做？

Answer 1

您可以获取此图片的数据网址。

document.getElementById('imageView').toDataURL('image/png')

返回值将是PNG中的Base64编码图像数据。您可以将此数据上传到服务器。您也可以向客户端显示此数据，而无需进行任何转换或转换（<img src="data:..."/>）。

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

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

通过ajax传递画布数据

1 个答案: