FabricJS - Bagaimana untuk menetapkan tahap kualiti dalam rentetan URL objek Line?-tutorial js-php.cn

FabricJS - Bagaimana untuk menetapkan tahap kualiti dalam rentetan URL objek Line?

王林

Lepaskan： 2023-08-31 21:21:02

ke hadapan

507 orang telah melayarinya

FabricJS – 如何设置 Line 对象的 URL 字符串中的质量级别？

Dalam tutorial ini, kita akan belajar cara menetapkan tahap kualiti dalam rentetan URL objek Line menggunakan FabricJS. Elemen garis ialah salah satu elemen asas yang disediakan dalam FabricJS. Ia digunakan untuk membuat garis lurus. Memandangkan elemen garis adalah geometri satu dimensi dan tidak mengandungi bahagian dalam, ia tidak pernah diisi.

Kita boleh mencipta objek garis dengan mencipta contoh fabric.Line, menyatakan koordinat x dan y garisan dan menambahkannya pada kanvas. Untuk menetapkan tahap kualiti dalam rentetan URL objek Line, kami menggunakan atribut quality.

tatabahasa

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

Salin selepas log masuk

parameter

Pilihan (pilihan) - Parameter ini ialah objek , iaitu URL Baris Perwakilan objek menyediakan penyesuaian tambahan. Ketinggian, kualiti, format dan banyak sifat lain boleh ditukar menggunakan parameter ini, yang mana kualiti ialah harta.

Kunci pilihan

kualiti - Hartanah ini menerima nilai Nombor yang mewakili tahap kualiti imej output akhir . Nilai yang boleh diterima adalah antara 0 dan 1, tidak termasuk 0. 0.1 mewakili kualiti terburuk, dan 1 mewakili kualiti terbaik. Sifat ini hanya boleh digunakan dalam format jpeg. Nilai lalai ialah 1.

Jangan gunakan kualitiatribut

Contoh

Mari lihat contoh kod untuk melihat imej output tanpa menggunakan atribut kualiti. Sebaik sahaja kami membuka konsol daripada alat pembangun, kami boleh melihat perwakilan URL objek Line. Kami boleh menyalin URL dan menampalnya ke dalam bar alamat tab baharu untuk melihat output akhir. Memandangkan kami tidak menggunakan atribut quality, nilai lalai, iaitu 1, akan digunakan.

<!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 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 Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
         angle: 70,
      });

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

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

Salin selepas log masuk

Gunakan KualitiAtribut

Contoh

Mari lihat contoh kod untuk melihat rupa imej output akhir objek Line apabila menggunakan sifat quality. Dalam kes ini, kami memberikannya nilai 0.1. Oleh itu kualiti imej akhir akan menjadi yang paling teruk.

<!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 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 Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
         angle: 70,
      });

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

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

Salin selepas log masuk

Atas ialah kandungan terperinci FabricJS - Bagaimana untuk menetapkan tahap kualiti dalam rentetan URL objek Line?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!