Data URLs是一种以文本格式表示图像文件的方式。这使得在应用程序之间传输数据变得容易，并且可以将图像存储在内存中，而无需将其写入磁盘。使用Data URL在HTML画布上绘制图像相对简单，只需几行代码即可完成。
该过程涉及创建一个Image对象，并在使用drawImage()方法将其绘制在画布上之前，将其源属性设置为Data URL字符串。本文将提供逐步说明，介绍如何从数据URL绘制图像到HTML画布。
使用HTML5的drawImage()方法来显示画布图片或视频。您可以使用此功能来显示整个图像或仅显示部分图像。但在图像可以在画布上进一步加载之前，必须首先加载它。
以下是drawImage()的语法-
context.drawImage(img,x,y);
考虑以下示例，以更好地了解如何从数据URL绘制图像到HTML画布
在下面的示例中，我们正在运行脚本，从URL上绘制图像到画布上。
<!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>
当脚本被执行时，它将生成一个输出，其中包含从脚本提供的URL获取的画布上绘制的图像。
下面是另一个示例，我们在画布上显示了来自源URL的部分图像
<!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>
运行上述脚本后，输出窗口将弹出，显示从URL获取的画布上绘制的网页上的图像。
