Bagaimana untuk menambah pelicinan imej pada imej menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk menambah pelicinan imej pada imej menggunakan FabricJS?

WBOY

Lepaskan： 2023-08-24 13:53:11

ke hadapan

1246 orang telah melayarinya

如何使用 FabricJS 为图像添加图像平滑？

Dalam tutorial ini kami akan menunjukkan kepada anda cara menambah pelicinan imej pada imej anda Gunakan FabricJS. Melicinkan memberikan imej kesan melicinkan. Kita boleh mencipta imej Cipta objek dengan mencipta instance fabric.Image. Kerana ia adalah salah satu elemen asas Dengan FabricJS, kami juga boleh menyesuaikannya dengan mudah dengan menggunakan sifat seperti sudut, kelegapan, dsb. Untuk menambah pelicinan imej kami menggunakan atribut imageSmoothing.

Tatabahasa

new fabric.Image( element: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | String, { imageSmoothing: Boolean }: Object, callback: function)

Salin selepas log masuk

Parameter

elemen - Parameter ini menerima elemen HTMLImageElement, HTMLCanvasElement, HTMLVideoElement atau String elemen yang mewakili imej. Rentetan mestilah URL dan akan dimuatkan sebagai imej.
Pilihan (pilihan) - Parameter ini ialah objek yang menyediakan penyesuaian tambahan kepada objek kami. Menggunakan parameter ini, anda boleh menukar asalan, lebar lejang dan banyak sifat lain yang dikaitkan dengan objek imej yang melicinkan imej ialah atribut.
Panggil balik (pilihan) - Parameter ini ialah fungsi yang dipanggil selepas penapis akhir digunakan.

Kunci pilihan

imageSmoothing - Hartanah ini menerima nilai Boolean, mewakili Sama ada kanvas menggunakan pelicinan imej semasa melukis imej. ia adalah Nilai lalai adalah benar.

Kemunculan lalai objek imej

Contoh

Mari kita lihat contoh kod untuk memahami cara objek Imej muncul apabila imageSmoothing Harta tidak digunakan. Dalam kes ini, nilai lalai, benar, akan digunakan, jadi Kanvas akan menggunakan pelicinan imej.

<!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>Default appearance of Image object</h2>
   <p>You can see that image smoothing has been applied by default</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);
   </script>
</body>
</html>

Salin selepas log masuk

Gunakan atribut imageSmoothing dan berikannya sebagai palsu Nilai

Contoh

Dalam contoh ini, kami menggunakan atribut imageSmoothing dan menetapkannya palsu nilai. Oleh itu, kanvas tidak lagi menggunakan pelicinan imej untuk melukis imej.

<!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 imageSmoothing property and passing it a false value</h2>
   <p>You can see that image smoothing is no longer functioning</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,
         imageSmoothing: false,
      });
      
      // Add it to the canvas
      canvas.add(image);
   </script>
</body>
</html>

Salin selepas log masuk

Kesimpulan

Dalam tutorial ini, kami menggunakan dua contoh untuk menunjukkan cara Imej menggunakan FabricJS

Atas ialah kandungan terperinci Bagaimana untuk menambah pelicinan imej pada imej menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!