Rumah > Artikel > hujung hadapan web > Bagaimana untuk menarik URL Data ke dalam kanvas HTML?
Bagaimana untuk menarik URL Data ke dalam kanvas HTML?
- 王林ke hadapan
- 2023-08-20 22:41:15650semak imbas
URL data ialah cara untuk mewakili fail imej dalam format teks. Ini memudahkan untuk memindahkan data antara aplikasi dan membolehkan imej disimpan dalam ingatan tanpa menulisnya ke cakera. Melukis imej pada kanvas HTML menggunakan URL Data agak mudah dan boleh dilakukan dengan hanya beberapa baris kod.
Proses ini melibatkan mencipta objek Imej dan menetapkan atribut sumbernya kepada rentetan URL Data sebelum melukisnya pada kanvas menggunakan kaedah drawImage() Artikel ini akan memberikan arahan langkah demi langkah untuk cara melukis imej daripada URL data ke atas kanvas HTML.
Menggunakan drawImage() dalam Kanvas
Gunakan kaedah drawImage() HTML5 untuk memaparkan imej atau video kanvas. Anda boleh menggunakan ciri ini untuk memaparkan keseluruhan imej atau hanya sebahagian daripadanya. Tetapi sebelum imej boleh dimuatkan lebih jauh pada kanvas, ia mesti dimuatkan terlebih dahulu.
Sintaks
Berikut ialah sintaks drawImage()-
context.drawImage(img,x,y);
Pertimbangkan contoh berikut untuk lebih memahami cara melukis imej daripada URL data ke kanvas HTML
Contoh
Dalam contoh di bawah, kami menjalankan skrip untuk melukis imej daripada URL ke kanvas.
<!DOCTYPE html>
<html>
<body>
<canvas id="tutorial"></canvas>
<script>
var c = document.getElementById("tutorial");
var ctx = c.getContext("2d");
var image = new Image();
image.onload = function() {
ctx.drawImage(image, 0, 0);
};
image.src = 'https://www.tutorialspoint.com/images/logo.png';
</script>
</body>
</html>
Apabila skrip dilaksanakan, ia akan menghasilkan output yang mengandungi imej yang dilukis pada kanvas yang diperoleh daripada URL yang disediakan oleh skrip.
Contoh
Di bawah ialah satu lagi contoh di mana kami memaparkan imej separa daripada URL sumber pada kanvas
<!DOCTYPE html>
<html>
<body>
<style>
canvas{
border : 2px solid #82E0AA ;
}
</style>
<canvas id='tutorial' width=500 height=500></canvas>
<script>
var canvas = document.getElementById('tutorial');
var context = canvas.getContext('2d');
var image = new Image();
image.onload = () => {
context.imageSmoothingEnabled = false;
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(image, 30, 40, 50, 50, 150, 220, 200, 200);
};
image.src = 'https://www.tutorialspoint.com/images/logo.png';
</script>
</body>
</html>
Apabila menjalankan skrip di atas, tetingkap output akan muncul, memaparkan imej pada halaman web yang dilukis pada kanvas yang diperoleh daripada URL.
Atas ialah kandungan terperinci Bagaimana untuk menarik URL Data ke dalam kanvas HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!