轻松打造图片canvas，下载图片触手可得！

2023-10-28 18:17:33

身为前端开发人员，我们时常需要将动态生成的内容转化为图片，以供进一步处理或存储。借助canvas，这一任务变得轻而易举。在这篇深入的文章中，我们将逐步探讨如何使用canvas创建图片，并提供实际代码示例，帮助你轻松实现图片下载功能。

Canvas 简介

HTML5 canvas元素提供了一块基于JavaScript的绘图表面，允许你动态创建和操作图像。通过使用canvas的原生API或第三方库，你可以轻松地生成各种各样的图像，从简单的形状到复杂的绘图。

安装html2canvas

为了从canvas中导出图片，我们需要借助html2canvas库，它允许我们将canvas的内容转换为图像数据。安装html2canvas非常简单，可以使用以下npm命令：

npm install html2canvas

引入 Canvas2Image.js

为了使下载图像变得轻而易举，我们将使用Canvas2Image.js库，它提供了一种便捷的方式将canvas转换为图像文件。通过CDN或npm安装Canvas2Image.js：

<script src="https://cdnjs.cloudflare.com/ajax/libs/canvas2image/2.0.0/canvas2image.min.js"></script>

步骤分解

现在，我们已经具备了必要的工具，让我们分解下载图片canvas的步骤：

创建canvas：
首先，创建并初始化一个HTML canvas元素。
绘图：
使用canvas的绘图API或第三方库在canvas上进行绘图。
导出图片：
利用html2canvas将canvas转换为图像数据。
转换为图像文件：
使用Canvas2Image.js将图像数据转换为图像文件。
触发下载：
使用浏览器提供的API触发图像文件的下载。

代码示例

以下是一个将canvas转换为图像并下载的完整代码示例：

// 创建canvas
const canvas = document.getElementById("myCanvas");

// 绘图
// ...省略绘图代码...

// 导出图片
html2canvas(canvas).then(canvas => {
  const imageData = canvas.toDataURL("image/png");

  // 转换为图像文件
  const image = Canvas2Image.saveAsPNG(imageData);

  // 触发下载
  const link = document.createElement("a");
  link.href = image;
  link.download = "myImage.png";
  link.click();
});

实例展示

让我们通过一个实际实例来演示如何将包含文本和形状的canvas转换为图像并下载：

// 创建canvas
const canvas = document.getElementById("myCanvas");

// 绘制文本
const ctx = canvas.getContext("2d");
ctx.font = "30pxArial";
ctx.fillText("Hello Canvas!", 50, 50);

// 绘制矩形
ctx.fillStyle = "blue";
ctx.fillRect(100, 100, 100, 100);

// 导出并下载图片
html2canvas(canvas).then(canvas => {
  const imageData = canvas.toDataURL("image/png");
  const image = Canvas2Image.saveAsPNG(imageData);
  const link = document.createElement("a");
  link.href = image;
  link.download = "myCanvasImage.png";
  link.click();
});