Rumah > Artikel > hujung hadapan web > Bagaimana untuk menambah pelicinan imej pada imej menggunakan FabricJS?
Bagaimana untuk menambah pelicinan imej pada imej menggunakan FabricJS?
- WBOYke hadapan
- 2023-08-24 13:53:111187semak imbas
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)
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>
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>
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!