Создание изображения из Fabric.js JSON на сервере Python

Используя python, можно ли восстановить изображение из json-представления холста fabric.js?

Это легко сделать с помощью Node.js, но я использую django, поэтому предпочитаю не нужно запускать отдельный сервер node.js только для создания этих изображений и отправки их на мой сервер django.


person bab    schedule 19.10.2013    source источник


Ответы (2)


Вам не нужно запускать отдельный сервер node. Но вам нужна среда выполнения узла с установленными модулями — «холст» и «ткань». Сделав это, вы можете тривиально вызвать скрипт nodejs из своего кода Python.

Вот пример сценария 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"])
person suryasankar    schedule 14.04.2015

Нет.

Я не понимаю, как это возможно без написания Python-порта Fabric (или собственного парсера + рендерера).

Вот почему:

Строка данных JSON содержит пользовательское представление различных фигур Fabric, которые — во время синтаксического анализа и интерпретации с помощью Fabric loadFromJSON — все загружаются и отображаются на холсте. Затем холст можно было использовать для создания изображения.

Вы можете анализировать данные в python, так как это просто JSON. Вы можете пройтись по нему и проанализировать его. Вы даже сможете «увидеть» типы фигур, которые необходимо загрузить на холст. Но вам все равно понадобится главное — создать визуальное представление каждой из этих фигур.

Если вы не сделаете это вручную (используя какие-то графические методы в Python, что звучит как много работы), я не думаю, что можно сделать что-то еще.

person kangax    schedule 21.10.2013