Wie lege ich die Qualitätsstufe der URL-Zeichenfolge eines IText-Objekts mit FabricJS fest?-js-Tutorial-php.cn

Wie lege ich die Qualitätsstufe der URL-Zeichenfolge eines IText-Objekts mit FabricJS fest?

WBOY

Freigeben： 2023-08-24 11:33:16

nach vorne

1360 Leute haben es durchsucht

如何使用 FabricJS 设置 IText 对象的 URL 字符串的质量级别？

In diesem Tutorial erfahren Sie, wie Sie mithilfe von FabricJS die Qualitätsstufe im URL-String eines IText-Objekts festlegen. Die IText-Klasse wurde in FabricJS Version 1.4 eingeführt, die Fabric.Text erweitert und zum Erstellen von IText-Instanzen verwendet wird. IText-Instanzen geben uns die Freiheit, ohne zusätzliche Konfiguration neuen Text auszuwählen, auszuschneiden, einzufügen oder hinzuzufügen. Es gibt auch verschiedene unterstützte Tastenkombinationen und Maus-/Touch-Kombinationen, um Text interaktiv zu gestalten, die in Text nicht verfügbar sind.

Mit der auf IText basierenden Textbox können wir jedoch die Größe des Textrechtecks ändern und es automatisch umbrechen. Dies ist bei IText nicht der Fall, da sich die Höhe nicht anhand von Zeilenumbrüchen anpasst. Wir können IText-Objekte mithilfe verschiedener Eigenschaften manipulieren. Ebenso können wir die Qualitätsstufe im URL-String des IText-Objekts mithilfe des Qualitätsattributs festlegen.

Grammatik

toDataURL({ quality: Number }: Object): String

Nach dem Login kopieren

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt, das zusätzliche Anpassungen für die URL-Darstellung des IText-Objekts bereitstellt. Verwenden Sie diesen Parameter, um Höhe, Masse, Format und viele andere Eigenschaften zu ändern, zu denen auch die Masse gehört.

Wahltaste

Qualität – Diese Eigenschaft akzeptiert einen Number-Wert, der die Qualitätsstufe des endgültigen Ausgabebildes darstellt. Akzeptable Werte liegen zwischen 0 und 1, mit Ausnahme von 0. 0,1 steht für die schlechteste Qualität und 1 für die beste Qualität. Diese Eigenschaft kann nur im JPEG-Format verwendet werden. Der Standardwert ist 1.

Beispiel 1

Verwendet keine Qualitätsmerkmale

Sehen wir uns ein Codebeispiel an, um das Ausgabebild zu sehen, wenn das Qualitätsattribut nicht verwendet wird. Sobald wir die Konsole über die Entwicklungstools öffnen, können wir die URL-Darstellung des IText-Objekts sehen. Wir können die URL kopieren und in die Adressleiste eines neuen Tabs einfügen, um die endgültige Ausgabe zu sehen. Da wir das Qualitätsattribut nicht verwenden, wird der Standardwert 1 verwendet.

<!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 quality property</h2>
   <p>You can open console from dev tools and see the output URL. You can copy that and paste it in the address bar of a new tab to see the final image </p>
   <canvas id="canvas"></canvas>

   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a shadow object
      var shadow = new fabric.Shadow({
         blur: 25,
         color: "grey",
         offsetX: 12,
         offsetY: 15,
      });

      // Initiate an itext object
      var itext = new fabric.IText(
         "Add sample text here.Lorem ipsum dolor sit amet consectetur adipiscing.",{
            width: 300,
            left: 310,
            top: 70,
            fill: "#c70039",
            backgroundColor: "#c1dfed",
            stroke: "#c70039",
            originX: "center",
            shadow: shadow,
         }
      );

      // Add it to the canvas
      canvas.add(itext);

      // Using the toDataURL method
      console.log(itext.toDataURL({ format: "jpeg" }));
   </script>
</body>
</html>

Nach dem Login kopieren

Beispiel 2

Verwenden Sie Qualitätsmerkmale

Sehen wir uns ein Codebeispiel an, um zu sehen, wie das endgültige Ausgabebild eines IText-Objekts aussieht, wenn das Qualitätsattribut verwendet wird. In diesem Fall übergeben wir ihm den Wert 0,1. Daher wird die Qualität des endgültigen Bildes schlechter.

<!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 quality property</h2>
   <p>You can open console from dev tools and see the output URL. You can copy that and paste it in the address bar of a new tab to see the final image </p>
   <canvas id="canvas"></canvas>

   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a shadow object
      var shadow = new fabric.Shadow({
         blur: 25,
         color: "grey",
         offsetX: 12,
         offsetY: 15,
      });

      // Initiate an itext object
      var itext = new fabric.IText(
         "Add sample text here.Lorem ipsum dolor sit amet consectetur adipiscing.",{
            width: 300,
            left: 310,
            top: 70,
            fill: "#c70039",
            backgroundColor: "#c1dfed",
            stroke: "#c70039",
            originX: "center",
            shadow: shadow,
         }
      );

      // Add it to the canvas
      canvas.add(itext);

      // Using the toDataURL method
      console.log(itext.toDataURL({ format: "jpeg", quality: 0.1 }));
   </script>
</body>
</html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie lege ich die Qualitätsstufe der URL-Zeichenfolge eines IText-Objekts mit FabricJS fest?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!