Question

我在 FabricJS 画布上放了一个图像和一个文本框，但只渲染了文本框。我还尝试将整个画布导出为图像，但仍然只显示文本框。如果我在控制台中打印出画布上的所有对象，图像实例就在那里，但为什么没有渲染？这是JS Fiddle，

这是完整的 HTML 文件

<!DOCTYPE html>
<html>
  
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.3.1/fabric.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

</head>
<style>
    #c {
    border: 2px solid black;
    }

    #render {
        border: 2px solid red;
    }
</style>
  
<body>
    <h2>This is the test image</h2>
    <img id='testImg' src="https://picsum.photos/seed/123/50/50" crossorigin="anonymous">
    <h2>Fabric canvas</h2>
    <canvas id='c'></canvas>
    <h2>Save canvas as an image</h2>
    <div id='render'></div>
  
    <script>
        var canvas = new fabric.Canvas('c');
        canvas.setHeight(200);
        canvas.setWidth(200);
        
        //add image 
        var imgEle = $("#testImg")[0];
        var newImg = new fabric.Image(imgEle, {
            left: 0,
            top:0
        });
        canvas.add(newImg);
        canvas.renderAll();
        
        //add new textbox
        var newTextBox = new fabric.Textbox("Hello text box", {
        left: 0,
        top: 100,
        width: 200
        });
        canvas.add(newTextBox);
        canvas.renderAll();

        //two objects are stored in canvas
        console.log(JSON.stringify(canvas));

        //show the canvas image, only one object shows
        var canvasUrl = canvas.toDataURL('png');
        var canvasImg = $("<img id=canvasImg>");
        canvasImg.attr('src', canvasUrl);
        canvasImg.appendTo("#render");
        
    </script>
</body>
</html>

Answer 1

在您的代码中，您不会等待图像加载，因此新的 fabric.Image 在图像完全加载之前执行，这就是为什么您只能看到文本。
我们需要在图像上添加 onload。

查看下面的代码：

var canvas = new fabric.Canvas('c');
canvas.setHeight(120);
canvas.setWidth(200);

$("#testImg")[0].onload = function () {
  var newImg = new fabric.Image(this, { left: 10, top: 10 });
  canvas.add(newImg);
  canvas.renderAll();
}


var newTextBox = new fabric.Textbox("Hello", { left: 0, top: 70, width: 90 });
canvas.add(newTextBox);
canvas.renderAll();

#c {
  border: 2px solid black;
}

#render {
  border: 2px solid red;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script>
 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  
This is the test image
<img id='testImg' src="https://picsum.photos/seed/123/50/50" crossorigin="anonymous">

<canvas id='c'></canvas>

织物 js 画布不渲染图像

1 个答案: