在 python 服务器上从 Fabric.js JSON 构造图像

Posted

技术标签:

【中文标题】在 python 服务器上从 Fabric.js JSON 构造图像【英文标题】:Construct image from Fabric.js JSON on python server 【发布时间】:2013-10-28 14:21:59 【问题描述】:

使用 python,是否可以从 fabric.js 画布的 json 表示重建图像?

Node.js 很容易做到,但我使用的是 django,所以我不想运行单独的 node.js 服务器来创建这些图像以将它们发送到我的 django 服务器。

【问题讨论】:

【参考方案1】:

如果不编写 Fabric 的 Python 端口(或自定义解析器 + 渲染器),我看不出这怎么可能。

原因如下

JSON 数据字符串包含各种 Fabric 形状的自定义表示,在 Fabric 的 loadFromJSON 解析和解释期间,这些形状都被加载并呈现到画布上。然后可以使用画布生成图像。

您可以在 python 中解析数据,因为它只是 JSON。你可以走过它并分析它。您甚至可以“看到”需要加载到画布上的各种形状。但是您仍然需要做主要的事情 - 为每个形状创建视觉表示。

除非您手动执行此操作(在 Python 中使用某种图形方法;这听起来像是一大堆工作),否则我认为没有什么可以做的。

【讨论】:

【参考方案2】:

您不必运行单独的节点服务器。但是您确实需要一个安装了模块“canvas”和“fabric”的节点运行时。完成后,您可以从 python 代码中轻松调用 nodejs 脚本

这是一个示例 js 脚本,它将读取 JSON 输入并生成 PNG 输出文件

var fabric = require('fabric').fabric,
    fs = require('fs'),
    out = fs.createWriteStream(process.argv[3]);

var canvas = fabric.createCanvasForNode(530, 630);


canvas.loadFromJSON(process.argv[2], function() 
    canvas.renderAll();

    var stream = canvas.createPNGStream();
    stream.on('data', function(chunk) 
        out.write(chunk);
    );
);

这里是你如何在你的 python 代码中调用它

import subprocess
fabric_json = u'"objects": ["opacity": 1, "strokeMiterLimit": 10, "isMulticolor": false, "height": 203, "visible": true, "stroke": null, "filters": [], "hexColors": ["#085a68", "#ca350a", "#d8ec73"], "fill": "rgb(0,0,0)", "angle": 0, "fillRule": "nonzero", "flipX": false, "flipY": false, "top": 205.78, "scaleX": 0.46, "scaleY": 0.46, "strokeLineJoin": "miter", "width": 200, "backgroundColor": "", "clipTo": null, "type": "image", "strokeLineCap": "butt", "strokeDashArray": null, "strokeWidth": 1, "originY": "top", "originX": "left", "globalCompositeOperation": "source-over", "designId": 2825, "alignY": "none", "alignX": "none", "shadow": null, "crossOrigin": "", "src": "http://localhost.com/designs/sampleimage.png", "meetOrSlice": "meet", "designFileName": "sampleimage.png", "left": 208.68], "backgroundImage": "opacity": 1, "strokeMiterLimit": 10, "height": 630, "visible": true, "stroke": null, "filters": [], "fill": "rgb(0,0,0)", "angle": 0, "fillRule": "nonzero", "flipX": false, "flipY": false, "top": 0, "scaleX": 1, "scaleY": 1, "strokeLineJoin": "miter", "width": 530, "backgroundColor": "", "clipTo": null, "type": "image", "strokeLineCap": "butt", "strokeDashArray": null, "strokeWidth": 1, "originY": "top", "originX": "left", "globalCompositeOperation": "source-over", "alignY": "none", "alignX": "none", "shadow": null, "crossOrigin": "", "src": "http://localhost.com:5000/static/images/fabric/ts_rne_front.png", "meetOrSlice": "meet", "left": 0, "background": "#bf1515"'
subprocess.call(["node", "fabricImageGenerator.js", fabric_json, "outputImage.png"])

【讨论】:

以上是关于在 python 服务器上从 Fabric.js JSON 构造图像的主要内容,如果未能解决你的问题,请参考以下文章

Fabric.js - 如何使用自定义属性在服务器上保存画布

node.js loadFromDatalessJSON 上的 fabric.js 在组中移动对象

在 Raspberry Pi 上从 python 脚本为 Twilio 服务运行终端命令时出错

Python Django:在数据库save()上从服务器向客户端发送消息

正确安装后,fabric JS 未在节点上运行

如何使用fabric js的toSVG数据在服务器端(PHP)创建SVG和PNG图像