如何在FabricJS中更改图像的源？

在本教程中，我们将学习如何使用FabricJS更改图像的源。源也可以是图像的新URL。我们可以通过创建fabric.Image的实例来创建图像对象。由于它是FabricJS的基本元素之一，我们还可以通过应用角度、不透明度等属性来轻松自定义它。为了更改图像的源，我们使用setSrc方法。

语法

setSrc(src: String, callback: function, options: Object): fabric.Image

参数

  • src − 此参数接受一个字符串，该字符串表示源URL字符串。

  • callback (可选) − 此参数是一个函数，当图像加载完毕且所有滤镜都应用后，将调用此函数。此参数是可选的。

  • options (可选) − 此参数是一个对象，它为我们的图像提供额外的自定义选项。此参数是可选的。

图像对象的默认外观

示例

让我们来看一个代码示例，了解在不使用setSrc方法时选择是如何显示的。从这个例子中我们可以看到，我们可以使用fromURL方法并指定我们想要使用的源URL来将图像对象添加到画布。

<!DOCTYPE html>
<html>
<head>
   <!-- Adding the Fabric JS Library-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
   <h2>Default appearance of Image object</h2>
   <p>You can see that the image object has been added</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Using fromURL method
      fabric.Image.fromURL(
         "https://tutorialspoint.com/images/logo.png",
         function(Img) {
            canvas.add(Img).renderAll();
         }
      );
   </script>
</body>
</html>

使用setSrc方法

示例

在这个例子中，我们使用setSrc属性来更改图像。在这种情况下，我们实际上是在更新指向对象图像的源。

<!DOCTYPE html>
<html>
<head>
    <!-- Adding the Fabric JS Library-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
    <h2>Using the setSrc method</h2>
    <p>You can click on the button to see that the image has been changed</p>
    <button id="changeImageBtn">change image</button>
    <canvas id="canvas"></canvas>
    <script>
        // Initiate a canvas instance
        var canvas = new fabric.Canvas("canvas");
        canvas.setWidth(document.body.scrollWidth);
        canvas.setHeight(250);
        var imageObject;
        
        // Using fromURL method
        fabric.Image.fromURL(
            "https://tutorialspoint.com/images/logo.png",
            function(Img) {
                imageObject = Img;
                canvas.add(Img).renderAll();
            }, {
                crossorigin: "anonymous"
            }
        );
        
        // Using the setSrc method
        document
            .querySelector("#changeImageBtn")
            .addEventListener("click", () => {
                imageObject.setSrc(
                    "https://tutorialspoint.com/static/images/logo-color.png",
                    function() {
                        canvas.renderAll();
                    }
                );
            });
    </script>
</body>
</html>

结论

在本教程中，我们使用了两个示例来演示如何使用FabricJS更改图像的源。

更新于：2022年10月26日

1K+ 次浏览

启动您的职业生涯

通过完成课程获得认证

开始
广告
© . All rights reserved.