Bagaimana untuk menarik URL Data ke dalam kanvas HTML?-html tutorial-php.cn

Bagaimana untuk menarik URL Data ke dalam kanvas HTML?

王林

Lepaskan： 2023-08-20 22:41:15

ke hadapan

646 orang telah melayarinya

如何将Data URL绘制到HTML画布中？

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);

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!