search

Home >Web Front-end >JS Tutorial >How to find the original size of an image using FabricJS?

How to find the original size of an image using FabricJS?

WBOY
WBOYforward
2023-09-06 18:13:09892browse

如何使用 FabricJS 查找图像的原始大小？

In this tutorial, we will learn how to find the original size of an 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 such as angle, opacity, etc. To find the original size of the image we use the getOriginalSize method.

grammar

getOriginalSize(): Object

Use getOriginalSizeMethod

Example

In this example, we use the getOriginalSize method to get the width and height values ​​of the image. Here, the returned width and height values ​​are 311 and 82 respectively. 

<!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 getOriginalSize method</h2>
   <p>
      You can open the console from dev tools to see that the logged output contains the height and width of the Image
   </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,
         skewX: 15,
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using the getOriginalSize method
      console.log(
         "The original size of the Image object is: ",
         image.getOriginalSize()
      );
   </script>
</body>
</html>

Use getOriginalSize method and cropX attribute

Example

Let's look at a code example of the output logged when the getOriginalSize method is used in conjunction with the cropX attribute. Here we pass the value 50 to cropX. Therefore, our Image object will be cropped 50px in the x direction from the original image size. However, when we use the getOriginalSize method, the width and height values ​​we return are 311 and 82 respectively, which further proves that getOriginalSize will only return the original size image. 

<!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 getOriginalSize method along with cropX property</h2>
   <p>
      You can open the console from dev tools to see that the original size of the image will be returned regardless of having applied image cropping in xdirection
   </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,
         skewX: 15,
         cropX: 50,
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using the getOriginalSize method
      console.log(
         "The original size of the Image object is: ",
         image.getOriginalSize()
      );
   </script>
</body>
</html>

The above is the detailed content of How to find the original size of an image using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!

对象 fabric
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to add objects to canvas using FabricJS?Next article：How to add objects to canvas using FabricJS?

Related articles

See more