Home > Article > Web Front-end > How to save HTML Canvas as image using canvas.toDataURL()?
How to save HTML Canvas as image using canvas.toDataURL()?
- 王林forward
- 2023-08-28 20:41:131273browse
Use the toDataURL() method to get the image data URL of the canvas. It converts the drawing (canvas) to a 64-bit encoded PNG URL.
Example
You can try running the following code to save the canvas as an image −
<!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>The above is the detailed content of How to save HTML Canvas as image using canvas.toDataURL()?. For more information, please follow other related articles on the PHP Chinese website!
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to allow multiple file uploads in HTML formNext article：How to allow multiple file uploads in HTML form