FabricJS +ノードがnodeJsファブリックを介してbackgroundImageを設定できない

Question

ノードキャンバスを使用してFabricJに背景を設定できません。おそらく間違っていますが、どこにも見つかりませんでした私が本当にやるべきことのオンライン。

私が見る唯一のコードは、通常のノードですが、私は次のコードを書くとき、私は

を行う必要があります正確に何を教えない場所だから、私が得るすべては、私が追加したすべてのもので、最終的なイメージではありませんが、透明な背景。

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

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