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

Question

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

我想建立一个网站，人们可以在其中保存他们的 Canvas 绘图。哪种方法对我的用户来说更具可扩展性和速度？

Answer 1

要打开您的选项:使用 fabric.js 您可以序列化您的 fabric.js Canvas 到 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' })
);

现在，当您想要序列化此 Canvas 时，您只需在 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
        },
        ...
    ]
}

---

反序列化 Canvas 回到它的状态是通过使用:

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

---

一些额外的资源:

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

Homepage