如何发送HTML＆LT;画布＆GT;数据到服务器 [英] How to send HTML <canvas> data to server

问题描述

好像有送两种方式＆LT;画布＆GT; 数据发送到服务器。一种是使用 canvas.getImageData（）来获得像素和8位的颜色值的数组。另一种方法是使用 canvas.toDataURL（））来发送文件附件。这种方法是这里证明。

It seems like there are two ways to send <canvas> data to the server. One is to use canvas.getImageData() to get an array of pixels and their 8-bit color values. The other method is to use canvas.toDataURL()) to send a file attachment. This method is demonstrated here.

我想建立一个网站，人们可以挽救他们的画布图纸。哪种方法更可扩展性和更快的为我的用户？

I want to build a site where people can save their canvas drawings. Which method would be more scalable and faster for my users?

推荐答案

要打开你的选择：使用fabric.js你可以序列化的 fabric.js 帆布JSON。

To open your options: Using fabric.js you could serialize your fabric.js canvas to JSON.

它不仅提供了编辑功能的附加层，但可以让你做到以下几点（更不用说能够在后一阶段来编辑自己的照片）：

Not only does it provide an additional layer of editing capabilities but allows you to do the following (Not to mention being able to edit their images at a later stage) :

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 函数序列;

Now when you want to serialize this canvas you simply call the JSON.stringify function on the fabric canvas object;

JSON.stringify（画布）;

，让你像下面这样对于上面的例子：

Which gives you something like the following for our example above:

{
    "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
        },
        ...
    ]
}

---

德序列画布回到它的状态是通过逆转：

---

De serializing the canvas back to its state is reversed by using:

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

---

一些其他资源：

---

Some Additional Resources:

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

Kitchen Sink Demo - View the capabilities of fabric.js (Including free drawing; modifying the size and position of the free drawing afterwards)

首页

这篇关于如何发送HTML＆LT;画布＆GT;数据到服务器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！