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

FabricJS + Node无法通过nodeJs结构

1 个答案: