【发布时间】：2016-04-17 08:37:48
【问题描述】：
问题出在 Ubuntu 14.04 上： 节点JS：0.10.32 画布：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();
}
事实：
- 无论我添加什么类型的对象（“图像”、“路径”、 'path-group') 他们根本不渲染，除了文本和 也许（我没有测试过）路径不是来自 URL 的。
- 在上面的 JSON 中 有背景 img - 它也不会渲染。
-
完全没有错误，但是：
在 OSX 上相同的脚本可以正常工作，但是：
当我尝试添加“大”SVG 文件时，它给了我： “给定的图像尚未完成加载” 适用于大量普通 PNG。
“渲染”最终 PNG 的时间与对象的数量及其图像大小成正比，这可能表明它们加载得很好。
我已经安装了所有依赖的库。
尝试添加一个以同样问题结尾的对象：
fabric.Image.fromURL('http://somedomain.com/media/patterns/12.png', function(oImg, e) {...});
我打赌 node-canvas 以某种方式与 URL 失败。
我花了将近 2 天的时间试图解决这个可怕的问题];>
【问题讨论】：
-
上面的 JSON 还有一个问题：第一个对象的属性 type='image' 且 src 设置为 '.svg' 文件。那行不通：导致“给定的图像尚未完成加载”错误。要解决这个问题，您需要使用 fabric.loadSVGFromURL，我选择使用组 fabric.util.groupSVGElements 创建它们。希望有人帮助:)
标签： node.js ubuntu canvas fabricjs node-canvas