如何使用JavaScript将HTML Canvas另存为gif/jpg/png/pdf？

我们可以使用canvas.toDataURL()将HTML canvas另存为不同的文件格式，例如gif、png、jpg、webp等。

将HTML Canvas另存为png

示例

在此，使用canvas.DataURL()后，将类型设置为image/png即可将图像保存为PNG -

<!DOCTYPE html>
<html>
<body>
   <canvas id="myCanvas" width="300" height="170" style="border:2px solid #d3d3d3;"></canvas>
   <script>
      window.onload = function() {
         var canvas = document.getElementById("myCanvas");
         var context = canvas.getContext("2d");
         context.fillStyle = "red";
         context.fillRect(50, 50, 100, 100);
         window.location = canvas.toDataURL("image/png");
      }
   </script>
</body>
</html>

输出

右键单击画布，您将看到一个保存它的选项 -

单击另存为图片…，现在您可以保存图像了。让我们将其保存到桌面上，命名为mycanva.png。在保存类型：下，可以看到PNG图像，因为在代码中我们写了image/png -

将HTML Canvas另存为webp

示例

在此，使用canvas.DataURL()后，将类型设置为image/webp即可将图像保存为WebP。WebP是由Google开发的一种图像文件格式，旨在替代JPEG、PNG和GIF文件格式 -

<!DOCTYPE html>
<html>
<body>
   <canvas id="myCanvas" width="300" height="170" style="border:2px solid #d3d3d3;"></canvas>
   <script>
      window.onload = function() {
         var canvas = document.getElementById("myCanvas");
         var context = canvas.getContext("2d");
         context.fillStyle = "red";
         context.fillRect(50, 50, 100, 100);
         window.location = canvas.toDataURL("image/webp");
      }
   </script>
</body>
</html>