数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何从 Data URL 将图像绘制到 HTML Canvas 上？
Data URL 是一种以文本格式表示图像文件的方式。这使得在应用程序之间传输数据以及将图像存储在内存中变得容易，而无需将其写入磁盘。从 Data URL 将图像绘制到 HTML canvas 上相对简单，只需几行代码即可完成。
此过程涉及创建一个 Image 对象，并将它的 source 属性设置为 Data URL 字符串，然后使用 drawImage() 方法将其绘制到 canvas 上。本文将提供有关如何从 Data URL 将图像绘制到 HTML canvas 上的分步说明。
在 Canvas 中使用 drawImage()
HTML5 的 drawImage() 方法用于显示 canvas 中的图像或视频。您可以使用此功能显示整个图像或仅显示其中的一部分。但在可以进一步加载 canvas 上的图像之前，必须先加载它。
语法
以下是 drawImage() 的语法 -
context.drawImage(img,x,y);
请考虑以下示例，以便更好地了解如何从 Data URL 将图像绘制到 HTML canvas 上。
示例
在以下示例中，我们正在运行脚本以从 URL 将图像绘制到 canvas 上。
<!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://tutorialspoint.com/images/logo.png';
</script>
</body>
</html>
当脚本执行时，它将生成一个输出，其中包含从脚本中提供的 URL 获取的 canvas 上绘制的图像。
示例
以下是另一个示例，在这里我们显示 canvas 上来自源 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://tutorialspoint.com/images/logo.png';
</script>
</body>
</html>
运行上述脚本后，将弹出输出窗口，在网页上显示从 URL 获取的 canvas 上绘制的图像。
更新时间: 2023年4月20日
2K+ 阅读量
广告