如何在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.tw/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.tw/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.tw/static/images/logo-color.png",
                    function() {
                        canvas.renderAll();
                    }
                );
            });
    </script>
</body>
</html>

結論

在本教程中，我們使用了兩個示例來演示如何使用FabricJS更改影像的源。

更新於：2022年10月26日

1K+ 次瀏覽

啟動您的職業生涯

透過完成課程獲得認證

開始
廣告