ткань на nodeJS, изображения вообще не отображаются

Проблема в Ubuntu 14.04: NodeJS: 0.10.32 Canvas: 1.3.6 Fabric: 1.6.0-rc.1

Пример JSON:

{
"objects": [{
    "id": 0,
    "name": "1452525510_death_star.svg",
    "type": "image",
    "originX": "left",
    "originY": "top",
    "left": 78,
    "top": 21,
    "width": 512,
    "height": 512,
    "fill": "rgb(0,0,0)",
    "stroke": null,
    "strokeWidth": 1,
    "strokeDashArray": null,
    "strokeLineCap": "butt",
    "strokeLineJoin": "miter",
    "strokeMiterLimit": 10,
    "scaleX": 0.46,
    "scaleY": 0.46,
    "angle": 0,
    "flipX": false,
    "flipY": false,
    "opacity": 1,
    "shadow": null,
    "visible": true,
    "clipTo": null,
    "backgroundColor": "",
    "fillRule": "nonzero",
    "globalCompositeOperation": "source-over",
    "transformMatrix": null,
    "_controlsVisibility": {
        "tl": false,
        "tr": true,
        "br": true,
        "bl": false,
        "ml": true,
        "mt": false,
        "mr": false,
        "mb": true,
        "mtr": true
    },
    "src": "http://somedomain.com/media/patterns/users/1fb158157a882d6a4c983ddc401101d1.svg",
    "filters": [{
        "type": "Tint",
        "color": "#c485c4",
        "opacity": 1
    }],
    "crossOrigin": "",
    "alignX": "none",
    "alignY": "none",
    "meetOrSlice": "meet"
}, {
    "id": 1,
    "name": "Baby inside",
    "type": "image",
    "originX": "left",
    "originY": "top",
    "left": 102,
    "top": 290,
    "width": 470,
    "height": 427,
    "fill": "rgb(0,0,0)",
    "stroke": null,
    "strokeWidth": 1,
    "strokeDashArray": null,
    "strokeLineCap": "butt",
    "strokeLineJoin": "miter",
    "strokeMiterLimit": 10,
    "scaleX": 0.5,
    "scaleY": 0.5,
    "angle": 0,
    "flipX": false,
    "flipY": false,
    "opacity": 1,
    "shadow": null,
    "visible": true,
    "clipTo": null,
    "backgroundColor": "",
    "fillRule": "nonzero",
    "globalCompositeOperation": "source-over",
    "transformMatrix": null,
    "_controlsVisibility": {
        "tl": false,
        "tr": true,
        "br": true,
        "bl": false,
        "ml": true,
        "mt": false,
        "mr": false,
        "mb": true,
        "mtr": true
    },
    "src": "http://somedomain.com/media/patterns/12.png",
    "filters": [{
        "type": "Tint",
        "color": "#FFFFFF",
        "opacity": 1
    }],
    "crossOrigin": "",
    "alignX": "none",
    "alignY": "none",
    "meetOrSlice": "meet"
}],
"background": "#b0b0b0",
"backgroundImage": {
    "id": 0,
    "name": "",
    "type": "image",
    "originX": "left",
    "originY": "top",
    "left": 0,
    "top": 0,
    "width": 470,
    "height": 574,
    "fill": "rgb(0,0,0)",
    "stroke": null,
    "strokeWidth": 1,
    "strokeDashArray": null,
    "strokeLineCap": "butt",
    "strokeLineJoin": "miter",
    "strokeMiterLimit": 10,
    "scaleX": 1,
    "scaleY": 1,
    "angle": 0,
    "flipX": false,
    "flipY": false,
    "opacity": 1,
    "shadow": null,
    "visible": true,
    "clipTo": null,
    "backgroundColor": "",
    "fillRule": "nonzero",
    "globalCompositeOperation": "source-over",
    "transformMatrix": null,
    "_controlsVisibility": null,
    "src": "http://somedomain.com/media/products/121_37_2.jpg",
    "filters": [],
    "crossOrigin": "",
    "alignX": "none",
    "alignY": "none",
    "meetOrSlice": "meet"
}

Обратите внимание, что этот JSON, экспортированный с помощью toJSON(), имеет несколько настраиваемых полей: [имя, идентификатор].

Это из моего скрипта Node:

 function savetoFile() {
  var jsonData = JSONfromAbove;
  var out = fs.createWriteStream(filepath);
  canvas = fabric.createCanvasForNode(470, 574);

  canvas.loadFromJSON(jsonData, function () {  
    CanvasZoom(parseInt(zoom), function(){
    console.log('after zooom');
    console.log(canvas.getObjects());

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

  });
}

function CanvasZoom(z, callback) {
      width = canvas.width;
      height = canvas.height;
      canvas.setWidth(width*z);
      canvas.setHeight(height*z);
      canvas.setZoom(z);
      canvas.renderAll.bind(canvas);
      callback();
  }

Факты:

  1. Независимо от того, какие типы объектов я добавляю («изображение», «путь», «группа путей»), они вообще не отображаются, кроме текста и, возможно, (я не проверял) ПУТИ не из URL.
  2. В JSON выше есть фоновое изображение - оно тоже не рендерится.
  3. Однако вообще нет ошибок:

    Тот же идентичный скрипт на OSX работает нормально, НО:

    Когда я пытаюсь добавить «большой» файл SVG, он выдает: «данное изображение не завершило загрузку». Отлично работает с ОГРОМНЫМ количеством обычных PNG.

Время «рендеринга» окончательного PNG пропорционально количеству объектов и размерам их изображений, что может говорить о том, что они хорошо загружаются.

Я установил все зависимые библиотеки.

Пытался добавить один такой объект, заканчивающийся той же проблемой:

fabric.Image.fromURL('http://somedomain.com/media/patterns/12.png', function(oImg, e) {...});

Бьюсь об заклад, что node-canvas каким-то образом не работает с URL-адресами.

Почти 2 дня пытаюсь решить эту дьявольскую проблему ];>


person dudzio1222    schedule 12.01.2016    source источник
comment
Есть еще одна проблема с JSON выше: первый объект имеет атрибут type='image' с src, установленным в файл '.svg'. Это не сработает: указанное изображение не завершило ошибку загрузки. Чтобы исправить это, вам нужно использовать Fabric.loadSVGFromURL, и я предпочитаю создавать их с помощью групп Fabric.util.groupSVGElements. Надеюсь кому-нибудь поможет :)   -  person dudzio1222    schedule 13.01.2016


Ответы (1)


проблема в том, что на www.somedomain.com был httpasswd, поэтому он просто не может загружать файлы, но не выдает никаких ошибок.

При переключении с 1.6.0-rc1 на 1.5.X возникает ошибка: "Segmentation Fault".

person dudzio1222    schedule 13.01.2016