如何将数据 URL 中的图像绘制到 HTML Canvas 上?

htmlweb developmentfront end technology更新于 2024/4/22 10:20:17

数据 URL 是一种以文本格式表示图像文件的方式。这使得在应用程序之间传输数据以及将图像存储在内存中而无需将其写入磁盘变得容易。将数据 URL 中的图像绘制到 HTML Canvas 上相对简单，只需几行代码即可完成。

该过程包括创建一个 Image 对象并将其 source 属性设置为数据 URL 字符串，然后使用 drawImage() 方法将其绘制到 Canvas 上。本文将逐步指导您如何将数据 URL 中的图像绘制到 HTML Canvas 上。

在 Canvas 中使用 drawImage()

使用 HTML5 的 drawImage() 方法显示 Canvas 图片或视频。您可以使用此功能显示整幅图像或其中的一部分。但在图像进一步加载到画布上之前，必须先加载图像。

语法

以下是 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.cainiaomax.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.cainiaomax.com/images/logo.png';
      </script>
   </body>
</html>

运行上述脚本后，会弹出输出窗口，显示从URL获取的画布上绘制的网页图像。