Rumah > Artikel > hujung hadapan web > FabricJS - Bagaimana untuk menetapkan tahap kualiti dalam rentetan URL objek Line?
FabricJS - Bagaimana untuk menetapkan tahap kualiti dalam rentetan URL objek Line?
- 王林ke hadapan
- 2023-08-31 21:21:02479semak imbas
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
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>
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>
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!