小编典典

如何发送HTML 数据到服务器

ajax

似乎有两种方法可以将<canvas>数据发送到服务器。一种是用于canvas.getImageData()获取像素数组及其8位颜色值。另一种方法是用于canvas.toDataURL())发送文件附件。此方法在此处演示

我想建立一个人们可以保存其画布图纸的站点。哪种方法对我的用户而言更具可扩展性和更快性?


阅读 750

收藏
2020-07-26

共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' })
);

现在,当您要序列化此画布时,只需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的功能(包括免费绘图;随后修改免费绘图的大小和位置)

主页

2020-07-26