nodeJS 上的结构，根本没有图像渲染

Question

问题出现在 Ubuntu 14.04：节点JS：0.10.32 Canvas：1.3.6 面料：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"
}

请注意，使用 toJSON() 导出的这个 JSON 有一些自定义字段：[name, id]。

这是我的节点脚本：

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

事实：

无论我添加什么类型的对象('image', 'path', 'path-group') 它们根本不渲染，除了文本和也许（我没有测试过）不是来自 URL 的 PATHS。
在JSON上面有背景 img - 它也不会渲染。
完全没有错误，但是：

OSX 上的相同脚本工作正常但是：

当我尝试添加 "large" SVG 文件时，它给我： "image given has not completed loading" 适用于大量普通 PNG。

"render" 最终 PNG 的时间与对象的数量及其图像大小成正比，这可能表明它们正在加载某种井。

我已经安装了所有依赖库。

尝试添加一个以相同问题结尾的类似对象：

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

我打赌 node-canvas 会以 URL 失败。

我花了将近 2 天的时间来解决这个棘手的问题];>

Answer 1

他的问题是在 www.somedomain.com 上是 httpasswd，所以它无法下载文件但没有抛出任何错误。

将1.6.0-rc1切换为1.5.X时出现错误："Segmentation Fault".

nodeJS 上的结构，根本没有图像渲染

fabric on nodeJS, No images rendering at all

node.js

ubuntu

canvas

fabricjs

node-canvas