Fabric js画布不渲染图像答案

【问题标题】：fabric js canvas doesn't render imagesFabric js画布不渲染图像
【发布时间】：2021-06-30 05:31:12
【问题描述】：

我在 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>

【问题讨论】：

感谢@Helder Sepulveda 的帮助，现在JSFiddle 已修复。

标签： javascript html5-canvas fabricjs

【解决方案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>

【讨论】：