Rumah > Artikel > hujung hadapan web > Bagaimana untuk mencipta contoh Fabric.Image daripada rentetan URL menggunakan FabricJS?
Bagaimana untuk mencipta contoh Fabric.Image daripada rentetan URL menggunakan FabricJS?
- PHPzke hadapan
- 2023-08-24 14:09:111798semak imbas
Dalam tutorial ini kita akan belajar bagaimana untuk bermula dari Rentetan URL menggunakan FabricJS. Kita boleh mencipta objek Imej dengan mencipta contoh Fabrik.Imej. Memandangkan ia adalah salah satu elemen asas FabricJS, kita juga boleh dengan mudah Sesuaikan dengan menggunakan sifat seperti sudut, kelegapan dan banyak lagi. untuk mencipta Contoh Fabric.Imej daripada rentetan URL, kami menggunakan kaedah fromURL.
Tatabahasa
fromURL(url: String, callback: function, imgOptions: Object)
Parameter
url - Parameter ini menerima rentetan yang mewakili URL dari mana imej itu dicipta.
panggil balik (pilihan) - Parameter ini ialah fungsi yang dipanggil sejurus selepas imej dicipta. Untuk fungsi ini, imej yang baru dibuat diluluskan sebagai parameter pertama. Parameter kedua ialah nilai Boolean yang menunjukkan sama ada ralat berlaku. Parameter ini adalah pilihan.
imgOptions (pilihan) - Parameter ini ialah objek pilihan yang menyediakan penyesuaian tambahan pada imej kami. Gunakan parameter ini untuk menukar asal, lebar lejang dan banyak sifat lain yang dikaitkan dengan objek imej.
Jangan gunakan fromURLkaedah
Contoh
Mari kita lihat contoh kod untuk melihat bagaimana objek Imej dipaparkan apabila menggunakan kaedah fromURL Tidak digunakan. Dalam kes ini, kita hanya perlu mencipta contoh fabric.Image dan menambahnya ke kanvas kami.
<!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 fromURL method</h2>
<p>You can see that the image object has been added to the canvas</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 kaedah fromURL
Contoh
Dalam contoh ini kami menggunakan kaedah fromURL untuk menunjukkan bahawa kami boleh mencipta Walaupun kami tidak mempunyai elemen imej, ia adalah objek imej. Dalam kes ini kita hanya perlukan Memerlukan URL imej dan lulus fungsi panggil balik yang dibuat fabric.Image objek sebagai parameter pertama dan kemudian tambahkannya pada kanvas.
<!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 fromURL method</h2>
<p>
You can see that the image object can be created from the image URL itself
</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Calling fabric.Image.fromURL and passing the url of our desired image
fabric.Image.fromURL(
"https://www.tutorialspoint.com/images/logo.png",
function(Img) {
canvas.add(Img);
}
);
</script>
</body>
</html>
Kesimpulan
Dalam tutorial ini, kami menggunakan dua contoh untuk menunjukkan cara mencipta Dapatkan Fabric.Image daripada rentetan URL menggunakan FabricJS.
Atas ialah kandungan terperinci Bagaimana untuk mencipta contoh Fabric.Image daripada rentetan URL menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!