Проблема в 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();
}
Факты:
- Независимо от того, какие типы объектов я добавляю («изображение», «путь», «группа путей»), они вообще не отображаются, кроме текста и, возможно, (я не проверял) ПУТИ не из URL.
- В JSON выше есть фоновое изображение - оно тоже не рендерится.
Однако вообще нет ошибок:
Тот же идентичный скрипт на OSX работает нормально, НО:
Когда я пытаюсь добавить «большой» файл SVG, он выдает: «данное изображение не завершило загрузку». Отлично работает с ОГРОМНЫМ количеством обычных PNG.
Время «рендеринга» окончательного PNG пропорционально количеству объектов и размерам их изображений, что может говорить о том, что они хорошо загружаются.
Я установил все зависимые библиотеки.
Пытался добавить один такой объект, заканчивающийся той же проблемой:
fabric.Image.fromURL('http://somedomain.com/media/patterns/12.png', function(oImg, e) {...});
Бьюсь об заклад, что node-canvas каким-то образом не работает с URL-адресами.
Почти 2 дня пытаюсь решить эту дьявольскую проблему ];>