FabricJS + Node 无法通过 nodeJs 结构设置 backgroundImage答案

【问题标题】：FabricJS + Node not being able to set up backgroundImage via nodeJs fabricFabricJS + Node 无法通过 nodeJs 结构设置 backgroundImage
【发布时间】：2016-12-31 20:00:54
【问题描述】：

我无法使用节点画布在 FabricJs 上设置背景，我可能做错了，但我无法在网上找到我真正需要做的事情。

我看到的唯一代码是普通节点，但没有地方教我到底要做什么

因此，当我编写以下代码时，我得到的一切都是最终图像，其中包含我添加的所有内容，但背景透明。

var out = fs.createWriteStream('public/server/_tempImg/slideTeste.png');
var canvas = fabric.createCanvasForNode(800,450);

var text = new fabric.Textbox('Testing Slide with background', {
    fontFamily: 'Arial',
    textAlign: "center",
    left: 0,
    top: 0,
    fontSize: 40,
    width: 500,
    fill: '#000000'
});

canvas.add(text);
canvas.centerObject(text);


canvas.setBackgroundImage('public/img/bg_bookeh1.jpg',
    canvas.renderAll.bind(canvas));

var stream = canvas.createPNGStream();

stream.on('data', function(chunk) {
    out.write(chunk);
});

stream.on('end', function(data){
    //console.log('Salvou imagem');
    res.sendStatus(200);
});

我也试过用不同的图片设置它

canvas.setBackgroundImage('http://localhost:3000/img/bg_bookeh1.jpg',
    canvas.renderAll.bind(canvas));

我做错了什么？

图片在通过Node导出之前没有加载吗？

这是我得到的图像。具有透明背景的 PNG。

enter image description here

【问题讨论】：

标签： javascript node.js fabricjs

【解决方案1】：

我发现它之前完全没有加载图像，所以正确的方法是。

var out = fs.createWriteStream('public/server/_tempImg/slideTeste.png');
var canvas = fabric.createCanvasForNode(800,450);

var text = new fabric.Textbox('Testing Slide with background', {
    fontFamily: 'Arial',
    textAlign: "center",
    left: 0,
    top: 0,
    fontSize: 40,
    width: 500,
    fill: '#000000'
});

canvas.add(text);
canvas.centerObject(text);

//load the image first
fabric.Image.fromURL('http://localhost:3000/img/bg_bookeh1.jpg', function(myImg){

    var stream = canvas.createPNGStream();

    canvas.setBackgroundImage(myImg,
        canvas.renderAll.bind(canvas));

    stream.on('data', function(chunk) {
        out.write(chunk);
    });

    stream.on('end', function(data){
        //console.log('Salvou imagem');
        res.sendStatus(200);
    });

});

真正不同的是加载图像

fabric.Image.fromURL('http://localhost:3000/img/bg_bookeh1.jpg', function(myImg){

而不是在加载后创建图像。

stream.on('data', function(chunk) {
    out.write(chunk);
});

stream.on('end', function(data){
    //console.log('Salvou imagem');
    res.sendStatus(200);
});

【讨论】：