Rumah >hujung hadapan web >html tutorial >Bagaimana untuk menyimpan Kanvas HTML sebagai imej menggunakan canvas.toDataURL()?
Bagaimana untuk menyimpan Kanvas HTML sebagai imej menggunakan canvas.toDataURL()?
- 王林ke hadapan
- 2023-08-28 20:41:131384semak imbas
Gunakan kaedah toDataURL() untuk mendapatkan URL data imej kanvas. Ia menukar lukisan (kanvas) kepada URL PNG yang dikodkan 64-bit.
Contoh
Anda boleh cuba jalankan kod berikut untuk menyimpan kanvas sebagai imej −
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<canvasid = "newCanvas" width = "450" height = "300"></canvas>
<script>
var canvas = document.getElementById('newCanvas');
var ctx = canvas.getContext('2d');
// draw any shape
ctx.beginPath();
ctx.moveTo(120, 50);
ctx.bezierCurveTo(130,100, 130, 250, 330, 150);
ctx.bezierCurveTo(350,180, 320, 180, 240, 150);
ctx.bezierCurveTo(320,150, 420, 120, 390, 100);
ctx.bezierCurveTo(130,40, 370, 30, 240, 50);
ctx.bezierCurveTo(220,7, 350, 20, 150, 50);
ctx.bezierCurveTo(250,5, 150, 20, 170, 80);
ctx.closePath();
ctx.lineWidth = 3;
ctx.fillStyle ='#F1F1F1';
ctx.fill();
ctx.stroke();
var dataURL =canvas.toDataURL();
</script>
</body>
</html>Atas ialah kandungan terperinci Bagaimana untuk menyimpan Kanvas HTML sebagai imej menggunakan canvas.toDataURL()?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Cara membenarkan muat naik berbilang fail dalam bentuk HTMLArtikel seterusnya：Cara membenarkan muat naik berbilang fail dalam bentuk HTML