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

[英]How to send HTML data to server


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.

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

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

我想建立一个人们可以保存画布图纸的网站。哪种方法对我的用户来说更具可扩展性和更快速度?

3 个解决方案

#1


4  

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

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

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

现在,当您想要序列化此画布时,只需在Fabric画布对象上调用JSON.stringify函数;

JSON.stringify(canvas);

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:

一些额外资源:

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

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

Homepage

主页

#2


3  

You can .toDataURL() it

你可以.toDataURL()它

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

or with jQuery

或者使用jQuery

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

And then send that string through to the server via XHR, which should be the quickest.

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

#3


3  

Try this it works for me in the same case :-

试试这个在同样的情况下对我有用: -

to get json data for whole canvas use JSON.stringify(canvas);

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

and to load again from json use below code :-

并从json再次加载使用下面的代码: -

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

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:http://www.itdaan.com/blog/2012/02/28/18c7bdb7fbe0e1ffe405c22cc93ed734.html



 
© 2014-2018 ITdaan.com 粤ICP备14056181号