如何使用FabricJS获取图像的源代码？-js教程-PHP中文网

如何使用FabricJS获取图像的源代码？

王林

发布： 2023-08-22 12:17:02

转载

1303人浏览过

如何使用fabricjs获取图像的源代码？

In this tutorial, we are going to learn how to get the source of Image using FabricJS. We can create an Image object by creating an instance of fabric.Image. Since it is one of the basic elements of FabricJS, we can also easily customize it by applying properties like angle, opacity etc. In order to find the source of an Image, we use the getSrc method.

Syntax

getSrc(filtered: Boolean): String

登录后复制

Parameters

filtered − This parameter is a Boolean value which indicates whether the source is needed for svg or not.

Using the getSrc method

Example

In this example, we have used the getSrc method to obtain the original source of the image. It can be seen in the console that a String representation of the source of the image is returned.

<!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 getSrc method</h2>
   <p>
      You can open the console from dev tools to see that the logged output contains the image source
   </p> 
   <canvas id="canvas"></canvas>
   @@##@@
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating the image element
      var imageElement = document.getElementById("img1");
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
         skewX: 15,
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using the getSrc method
      console.log("The Source of the image is: ", image.getSrc(false));
   </script>
</body>
</html>

登录后复制

Using the getSrc method along with fromURL method

Example

Let’s see a code example of the logged output when the getSrc method is used in conjunction with the fromURL method.

<!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 getSrc method along with fromURL method</h2>
   <p>
      You can open the console from dev tools to see that the logged output contains the image source
   </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://www.tutorialspoint.com/images/logo.png",
         function (Img) {
            canvas.add(Img);
            
            // Using getSrc method
            console.log("The Source of the image is: ", Img.getSrc(false));
         }
      );
   </script>
</body>
</html>

登录后复制

以上就是如何使用FabricJS获取图像的源代码？的详细内容，更多请关注php中文网其它相关文章！