如何发送HTML<画布>数据到服务器

How to send HTML <canvas> data to server

本文关键字：数据 服务器 gt 画布 何发送 lt HTML      更新时间：2023-09-26

似乎有两种方法可以将<canvas>数据发送到服务器。一种是使用canvas.getImageData()来获得像素阵列及其8位颜色值。另一种方法是使用canvas.toDataURL())发送文件附件。这里演示了这种方法。

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

要打开您的选项：使用fabric.js，您可以将fabric.jss画布序列化为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画布对象上调用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);

一些附加资源：

厨房水槽演示-查看fabric.js的功能（包括免费绘图；之后修改免费绘图的大小和位置）

主页

您可以.toDataURL（）it

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

或使用jQuery

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

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

试试这个吧，它在同样的情况下对我有效：-

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

要再次从json加载，请使用以下代码：-

canvas.clear();
canvas.loadFromJSON(json_string,canvas.renderAll.bind(canvas));
相关文章：