search

Home >Web Front-end >JS Tutorial >How to create an instance of Fabric.Image from a URL string using FabricJS?

How to create an instance of Fabric.Image from a URL string using FabricJS?

PHPz
PHPzforward
2023-08-24 14:09:111914browse

如何使用 FabricJS 从 URL 字符串创建 Fabric.Image 的实例？

In this tutorial we will learn how to start from URL string using FabricJS. We can create an Image object by creating an instance fabric.image. Since it is one of the basic elements of FabricJS, we can also easily Customize it by applying properties such as angle, opacity, and more. in order to create Fabric.Image instance from a URL string, we use the fromURL method.

grammar

fromURL(url: String, callback: function, imgOptions: Object)

parameter

  • url - This parameter accepts a string representing the URL from which the image was created.

  • Callback (optional) - This parameter is a function that is called immediately after the image is created. For this function, the newly created image is passed as the first parameter. The second parameter is a Boolean value indicating whether an error occurred. This parameter is optional.

  • imgOptions (optional) - This parameter is an optional object that provides additional customization to our image. Use this parameter to change the origin, stroke width, and many other properties associated with the image object.

Do not use fromURLmethod

Example

Let's look at a code example to see how an Image object is displayed when using the fromURL method Unused. In this case we just need to create an instance of fabric.Image and add it to our canvas. 

<!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>Without using the fromURL method</h2>
   <p>You can see that the image object has been added to the canvas</p>
   <canvas id="canvas"></canvas>
   <img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
   <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,
      });
      
      // Add it to the canvas
      canvas.add(image);
   </script>
</body>
</html>

Use fromURLmethod

Example

In this example, we used the fromURL method to demonstrate that we can create Even though we don't have an image element, it's an image object. In this case we just need Requires the URL of the image and passes the created callback function fabric.Image object as the first parameter and then add it to the canvas. 

<!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 fromURL method</h2>
   <p>
      You can see that the image object can be created from the image URL itself
   </p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Calling fabric.Image.fromURL and passing the url of our desired image
      fabric.Image.fromURL(
         "https://www.tutorialspoint.com/images/logo.png",
         function(Img) {
            canvas.add(Img);
         }
      );
   </script>
</body>
</html>

in conclusion

In this tutorial, we use two examples to demonstrate how to create Get a Fabric.Image from a URL string using FabricJS.

The above is the detailed content of How to create an instance of Fabric.Image from a URL string using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!

Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to crop the width of a cloned image using FabricJS?Next article：How to crop the width of a cloned image using FabricJS?

Related articles

See more