FabricJS + Node無法通過nodeJs結構設置backgroundImage

Question

我無法使用node-canvas在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)); 

我在做什麼錯誤的設置呢？

在通過節點導出圖像之前圖像未加載嗎？

這是我得到的圖像。具有透明背景的PNG。

enter image description here

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