fabric on nodeJS, No images rendering at all

Question

The issue is on Ubuntu 14.04: NodeJS: 0.10.32 Canvas: 1.3.6 Fabric: 1.6.0-rc.1

Example 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"
}

Note that this JSON exported with toJSON() has some custom fields: [name, id].

This is from my Node script:

 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();
  }

Facts:

1. No matter what types of objects I add ('image', 'path', 'path-group') they are not rendering at all, except text and maybe (I did not tested it) PATHS not from URL's.
2. In JSON above there is background img - it doesn't rendering too.

3. There is no errors at all, however:

   The same identical script on OSX works fine BUT:

   When I'm trying to add "large" SVG file it gives me: "image given has not completed loading" Works fine with HUGE numbers of normal PNG's.

The time to "render" final PNG is proportional to number of objects and their image sizes which might tell that they are loading some kind of well.

I have installed all dependent libs.

Tried to add one object like that ending with the same problem:

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

I bet for node-canvas someway failing with URL's.

I spend almost 2 days trying to fix this devilish problem ];>

Answer 1

he issue is that on www.somedomain.com was httpasswd, so it just can't download files but did not throw any errors.

When switched 1.6.0-rc1 to 1.5.X an error occur: "Segmentation Fault".