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

问题描述：

好像有两种方法可以将<canvas>数据发送到服务器。一种是使用canvas.getImageData()来获得一组像素及其8位颜色值。另一种方法是使用canvas.toDataURL())发送文件附件。这种方法是demonstrated here。如何发送HTML <canvas>数据到服务器

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

答

打开您的选项：使用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);

一些其他资源：

Kitchen Sink Demo - 查看fabric.js的功能（包括免费绘图;修改尺寸，之后*拖拽的位置）

Homepage

如果我允许我的用户使用标记或钢笔工具“涂鸦”，该方法是否有效？我想JSON数组必须是巨大的才能包含所有的数据。在这种情况下，您会推荐哪种方法更具可扩展性？ – babonk 2012-02-28 19:38:11

如果需要在稍后阶段编辑“涂鸦”，这取决于实际情况，如果是这样，那可能完全适合您的需求;如果不是，静态图像最有可能会更好。我会在早上进行一些测试并回复你。 ;） – f0x 2012-02-28 19:59:08

太棒了。人们将能够回去编辑他们的图像。我认为实际的PNG格式比JSON更有效，但也许我错了 – babonk 2012-02-28 20:11:36

答

可以.toDataURL()它

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

或使用jQuery

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

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

我不认为你可以直接从jQuery eleme访问DataURL NT。使用'$（'＃mycanvas'）[0] .toDataURL（）'获取相应的DOM节点。 – Boldewyn 2012-02-28 09:00:02

谢谢..这种方法在以后不需要编辑的时候肯定会很好。 – babonk 2012-02-29 18:49:06

答

试试这个工作对我来说在相同的情况下： -

获得JSON数据为整个画布使用JSON.stringify(canvas);

和从json再次加载使用下面的代码： -

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

如何发送HTML 数据到服务器

相关推荐

如何发送HTML