如何使用 FabricJS 更改图像的来源?
fabricjsjavascripthtml5 canvas
在本教程中，我们将学习如何使用 FabricJS 更改图像的来源。来源也可以是图像的新 URL。我们可以通过创建 fabric.Image 实例来创建图像对象。由于它是 FabricJS 的基本元素之一，我们还可以通过应用角度、不透明度等属性轻松地对其进行自定义。为了更改图像的来源，我们使用 setSrc 方法。
语法
setSrc(src: String, callback: function, options: Object): fabric.Image
参数
src − 此参数接受表示源 URL 字符串的字符串。
callback (可选) − 此参数是一个函数，在图像已加载且所有过滤器已应用时调用。此参数是可选的。
options(可选) − 此参数是一个对象，它为我们的图像提供额外的自定义。此参数是可选的。
Image 对象的默认外观
示例
让我们看一个代码示例，以了解未使用 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> // 启动一个canvas实例 var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Using fromURL method fabric.Image.fromURL( "https://www.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> // 启动一个canvas实例 var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); var imageObject; // Using fromURL method fabric.Image.fromURL( "https://www.tutorialspoint.com/images/logo.png", function(Img) { imageObject = Img; canvas.add(Img).renderAll(); }, { crossorigin: "anonymous" } ); // 使用 setSrc 方法 document .querySelector("#changeImageBtn") .addEventListener("click", () => { imageObject.setSrc( "https://www.tutorialspoint.com/static/images/logo-color.png", function() { canvas.renderAll(); } ); }); </script> </body> </html>
结论
在本教程中，我们使用了两个示例来演示如何使用 FabricJS 更改图像的来源。
