FabricJS + Node不能通过nodeJs fabric设置backgroundImage

FabricJS + Node not being able to set up backgroundImage via nodeJs fabric

本文关键字：nodeJs fabric 设置 backgroundImage Node 不能 FabricJS      更新时间：2023-09-26

我无法使用节点画布在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。

输入图片描述

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

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);
});
相关文章：