织物 js canvas 不渲染图像

Question

I put an image and a textbox on a FabricJS canvas, but only the textbox is rendered.我在 FabricJS canvas 上放了一个图像和一个文本框，但只呈现了文本框。 I also tried to export the whole canvas as an image, but still, only the textbox showed up.我还尝试将整个 canvas 导出为图像，但仍然只显示文本框。 If I print out all objects on canvas in the console, the image instance is there, but why it's not rendered?如果我在控制台中打印出 canvas 上的所有对象，图像实例就在那里，但为什么它没有渲染？ Here is the JS Fiddle ,这是JS 小提琴，

Here is the full HTML file这是完整的 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

In your code you are not waiting for the image to load, so what happens is that the new fabric.Image executes before the image has fully loaded, that is why you only see the text.在您的代码中，您无需等待图像加载，因此会发生新的 fabric.Image 在图像完全加载之前执行，这就是您只看到文本的原因。
We need an onload on the image.我们需要对图像进行onload 。

See the code below:请看下面的代码：

 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 canvas 不渲染图像

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-04-03 19:33:00

织物 js canvas 不渲染图像

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-04-03 19:33:00

解决方案1
1 已采纳 2021-04-03 19:33:00