Heim >Web-Frontend >js-Tutorial >Wie kann ich mithilfe von FabricJS überprüfen, ob auf ein Bild ein Zuschnitt angewendet wurde?

Wie kann ich mithilfe von FabricJS überprüfen, ob auf ein Bild ein Zuschnitt angewendet wurde?

PHPznach vorne: 2023-08-24 16:29:021038Durchsuche

如何使用 FabricJS 检查图像是否已应用裁剪？

In diesem Tutorial zeigen wir Ihnen, wie Sie überprüfen, ob auf ein Bild ein Zuschnitt angewendet wurde Verwenden Sie FabricJS. 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 problemlos anpassen Wenden Sie Eigenschaften wie Winkel, Deckkraft usw. an, um herauszufinden, ob das Bild zugeschnitten wurde Bei der Bewerbung nutzen wir die Methode hasCrop. Diese Methode gibt false zurück, wenn dies nicht der Fall ist Angewendet oder der angewendete Zuschneidewert, falls angewendet.

Grammatik

hasCrop(): Boolean | Number

Verwenden Sie die hasCropMethode

Beispiel

In diesem Beispiel verwenden wir die Methode hasCrop, um herauszufinden, ob das Image-Objekt Angewandte Pflanzen. In diesem Fall verfügt unser Bildobjekt über keinen Bildzuschnitt Die protokollierte Ausgabe ist falsch.

<!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 hasCrop method</h2>
   <p>
      You can open the console from dev tools to see that the logged output is false
   </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);
      
      // Using the hasCrop method
      console.log("Is crop applied for the Image object?: ", image.hasCrop());
   </script>
</body>
</html>

Verwenden Sie die Methode hasCrop und das Attribut cropY

Beispiel

Sehen wir uns ein Codebeispiel der protokollierten Ausgabe bei Verwendung der Methode hasCrop an mit dem Attribut cropY. Wir haben den Wert 2 an das Attribut cropY übergeben Stellen Sie sicher, dass das Bildobjekt einen 2-Pixel-Bildausschnitt in Y-Richtung aufweist. in diesem Fall, Der Clipping-Wert wird in der Konsole zurückgegeben.

<!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 hasCrop method along with cropY property</h2>
   <p>
      You can open the console from dev tools to see that the logged output is 2
   </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,
         cropY: 2,
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using the hasCrop method
      console.log(
         "Crop value applied for the Image object is: ",
         image.hasCrop()
      );
   </script>
</body>
</html>

Fazit

In diesem Tutorial zeigen wir anhand von zwei Beispielen, wie man prüft, ob ein Bild vorhanden ist Das Zuschneiden wurde mit FabricJS angewendet.

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von FabricJS überprüfen, ob auf ein Bild ein Zuschnitt angewendet wurde?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

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

Vorheriger Artikel：Implementieren Sie Bildübergänge mit Fade-Effekten mithilfe von JavaScriptNächster Artikel：Implementieren Sie Bildübergänge mit Fade-Effekten mithilfe von JavaScript

In Verbindung stehende Artikel

Mehr sehen