HTML 使用 toBlob 下载 Canvas 图像

在本文中，我们将介绍如何使用 HTML 中的 toBlob 方法来下载 Canvas 图像。

阅读更多：HTML 教程

什么是 toBlob 方法？

toBlob 是 HTML 中的一个方法，它可以将一个 Canvas 元素中的图像转换为 Blob 对象。Blob 对象代表了一个不可变、原始数据的类文件对象。

如何使用 toBlob 方法下载 Canvas 图像？

要使用 toBlob 方法下载 Canvas 图像，需要按照以下步骤操作：

首先，创建一个 Canvas 元素，并绘制你所需要的图像。例如，创建一个绘制了一张图片的 Canvas 元素：

<canvas id="myCanvas"></canvas>
<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  var img = new Image();
  img.onload = function() {
    ctx.drawImage(img, 0, 0);
  };
  img.src = "example.jpg";
</script>

接下来，在你希望用户下载图像的地方，添加一个按钮或其他交互元素。例如，添加一个按钮来触发下载：

<button onclick="downloadImage()">下载图像</button>

在 JavaScript 中添加一个函数来触发 toBlob 方法，将 Canvas 图像转换为 Blob 对象，并创建一个下载链接：

<script>
  function downloadImage() {
    var canvas = document.getElementById("myCanvas");
    canvas.toBlob(function(blob) {
      var url = URL.createObjectURL(blob);
      var element = document.createElement("a");
      element.href = url;
      element.download = "canvas.png";
      element.click();
      URL.revokeObjectURL(url);
    });
  }
</script>

在这个例子中，我们通过 toBlob 方法将 Canvas 图像转换为一个 Blob 对象，然后使用 URL.createObjectURL 方法创建一个指向 Blob 对象的 URL。接着，我们创建一个 <a> 元素，并将 URL 和文件名添加到元素的 href 和 download 属性中。最后，我们使用 element.click 方法模拟用户点击下载链接的行为，并通过 URL.revokeObjectURL 方法释放 URL 对象。

示例说明

让我们通过一个完整的示例来说明如何使用 toBlob 方法下载 Canvas 图像。

考虑下面的代码，我们将创建一个简单的 Canvas 元素，并在其中绘制一段文本：

<canvas id="myCanvas"></canvas>
<button onclick="downloadImage()">下载图像</button>

<script>
  function downloadImage() {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    ctx.font = "30px Arial";
    ctx.fillText("Hello, World!", 50, 50);

    canvas.toBlob(function(blob) {
      var url = URL.createObjectURL(blob);
      var element = document.createElement("a");
      element.href = url;
      element.download = "canvas.png";
      element.click();
      URL.revokeObjectURL(url);
    });
  }
</script>

在这个示例中，我们创建了一个 Canvas 元素，并在其中绘制了一段文本 “Hello, World!”。在按钮被点击时，将通过 toBlob 方法将 Canvas 图像转换为 Blob 对象，并创建一个下载链接。用户点击下载链接后，将以 “canvas.png” 的文件名下载这个图像。