如何将HTML <canvas>数据发送到服务器

Question

似乎有两种方法可以将<canvas>数据发送到服务器。一种方法是使用canvas.getImageData()来获取像素及其8位颜色值的数组。另一种方法是使用canvas.toDataURL())发送文件附件。这个方法是demonstrated here。

我想建立一个网站，人们可以保存他们的画布绘图。对于我的用户来说，哪种方法更具伸缩性和更快？

Answer 1

打开您的选项:使用fabric.js，您可以将fabric.js画布序列化为JSON。

它不仅提供了额外的一层编辑功能，而且允许您执行以下操作(更不用说能够在稍后阶段编辑图像)：

var canvas = new fabric.Canvas('c');
canvas.add(
    new fabric.Rect({ top: 100, left: 100, width: 50, height: 50, fill: '#f55' }),
    new fabric.Circle({ top: 140, left: 230, radius: 75, fill: 'green' }),
    new fabric.Triangle({ top: 300, left: 210, width: 100, height: 100, fill: 'blue' })
);

现在，当您想序列化此画布时，只需调用fabric canvas对象上的JSON.stringify函数即可；

JSON.stringify(canvas);

这为我们上面的示例提供了类似于以下内容：

{
    "objects": [
        {
            "type": "rect",
            "left": 100,
            "top": 100,
            "width": 50,
            "height": 50,
            "fill": "#f55",
            "overlayFill": null,
            "stroke": null,
            "strokeWidth": 1,
            "scaleX": 1,
            "scaleY": 1,
            "angle": 0,
            "flipX": false,
            "flipY": false,
            "opacity": 1,
            "selectable": true
        },
        ...
    ]
}

使用以下命令将画布反序列化回其状态：

var canvas = new fabric.Canvas('c');
canvas.loadFromJSON(yourJSONString);

其他一些资源：

Kitchen Sink Demo -查看fabric.js的功能(包括自由绘制；之后修改自由绘制的大小和位置)

Homepage

Answer 2

你可以.toDataURL()它

var datastring = document.getElementById('mycanvas').toDataURL("image/png"));

或使用jQuery

var datastring = $('#mycanvas')[0].toDataURL("image/png");

然后通过XHR将该字符串发送到服务器，这应该是最快的。

Answer 3

试试这个，它在相同的情况下也适用于我：

要获取整个画布的json数据，请使用JSON.stringify(canvas);

并使用下面的代码从json重新加载：

canvas.clear();
canvas.loadFromJSON(json_string,canvas.renderAll.bind(canvas));