Heim > Artikel > Web-Frontend > Wie finde ich die Originalgröße eines Bildes mit FabricJS?

Wie finde ich die Originalgröße eines Bildes mit FabricJS?

WBOYnach vorne: 2023-09-06 18:13:09762Durchsuche

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

In diesem Tutorial erfahren wir, wie man mit FabricJS die Originalgröße eines Bildes ermittelt. Wir können ein Image-Objekt erstellen, indem wir eine Instanz von fabric.Image erstellen. Da es eines der Grundelemente von FabricJS ist, können wir es auch einfach anpassen, indem wir Eigenschaften wie Winkel, Deckkraft usw. anwenden. Um die Originalgröße des Bildes zu ermitteln, verwenden wir die Methode getOriginalSize.

Grammatik

getOriginalSize(): Object

Verwenden Sie die Methode getOriginalSize

Beispiel

In diesem Beispiel haben wir die Methode

getOriginalSize verwendet, um die Breiten- und Höhenwerte des Bildes abzurufen. Hier betragen die zurückgegebenen Breiten- und Höhenwerte 311 bzw. 82.

<!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>

Verwenden Sie die Methode

getOriginalSize und das Attribut cropX Beispiel

Sehen wir uns ein Codebeispiel der protokollierten Ausgabe an, wenn die Methode

getOriginalSize

in Verbindung mit dem Attribut cropX verwendet wird. Hier übergeben wir den Wert 50 an CropX. Daher wird unser Bildobjekt in x-Richtung um 50 Pixel gegenüber der Originalbildgröße beschnitten. Wenn wir jedoch die Methode getOriginalSize verwenden, geben wir Breiten- und Höhenwerte von 311 bzw. 82 zurück, was ein weiterer Beweis dafür ist, dass getOriginalSize nur das Bild in Originalgröße zurückgibt.

<!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>

Das obige ist der detaillierte Inhalt vonWie finde ich die Originalgröße eines Bildes mit FabricJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

对象 fabric

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie füge ich mit FabricJS Objekte zur Leinwand hinzu?Nächster Artikel：Wie füge ich mit FabricJS Objekte zur Leinwand hinzu?

In Verbindung stehende Artikel

Mehr sehen