玩转 Canvas API，轻松保存图像

Canvas API 简介

Canvas API 是 HTML5 中提供的一套强大的绘图 API，它允许您在网页上创建和操作二维图形。它提供了丰富的绘图函数，您可以使用它们来绘制各种形状、线条、文本和其他图形元素。

使用 toBlob() 方法保存图像

Canvas API 中的 toBlob() 方法允许您将 Canvas 画布上的图像导出为各种格式的图像文件。它接受两个参数：

• 第一个参数是一个回调函数，该函数将在图像数据准备好后被调用。
• 第二个参数是一个可选的对象，您可以通过它来指定图像的格式、质量和文件大小。

以下是一个使用 toBlob() 方法保存图像的简单示例：

var canvas = document.getElementById('myCanvas');
canvas.toBlob(function(blob) {
  // blob 是一个包含图像数据的二进制对象
  // 您可以在此使用 blob 数据创建对象 URL 或直接下载图像
}, 'image/png');

保存图像的不同格式

toBlob() 方法允许您将图像保存为多种格式，包括 PNG、JPEG 和 WebP。您可以通过在第二个参数中指定图像格式来选择您想要的格式。

例如，要将图像保存为 PNG 格式，您可以使用以下代码：

canvas.toBlob(function(blob) {
  // ...
}, 'image/png');

要将图像保存为 JPEG 格式，您可以使用以下代码：

canvas.toBlob(function(blob) {
  // ...
}, 'image/jpeg');

要将图像保存为 WebP 格式，您可以使用以下代码：

canvas.toBlob(function(blob) {
  // ...
}, 'image/webp');

控制图像质量和文件大小

在第二个参数中，您还可以指定图像的质量和文件大小。质量是一个介于 0 到 1 之间的数字，它表示图像的质量。文件大小是一个以字节为单位的数字，它表示图像文件的大小。

例如，要将图像质量设置为 0.9，您可以使用以下代码：

canvas.toBlob(function(blob) {
  // ...
}, 'image/png', {quality: 0.9});

要将图像文件大小设置为 100KB，您可以使用以下代码：

canvas.toBlob(function(blob) {
  // ...
}, 'image/png', {quality: 0.9, size: 100000});

将图像直接下载到您的设备

您可以使用 HTML5 的 download 属性将图像直接下载到您的设备。要做到这一点，您需要创建一个带有 download 属性的 标签，并将图像的 URL 设置为该属性的值。

<a href="image.png" download>下载图像</a>