如何使用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>