如何将 html 画布转换为 png 文件 - Html (1)

📌 相关文章

📜 如何将 html 画布转换为 png 文件 - Html (1)

📅 最后修改于: 2023-12-03 15:09:05.986000 🧑 作者: Mango

如何将 HTML 画布转换为 PNG 文件 - HTML

HTML 画布是使用 HTML5 中的 <canvas> 元素创建的一个可绘制区域。通过使用 JavaScript，我们可以在画布上绘制图形、动画等效果。但是，如果我们想将画布上绘制的内容保存为 PNG 图片，该怎么办呢？

下面我们将介绍两种实现方式：使用 HTML2Canvas 和 Canvas2Image 库。

使用 HTML2Canvas

HTML2Canvas 是一个可以将 DOM 元素转换为图像的 JavaScript 库。它可以将当前页面中的任意 DOM 元素转换为 Canvas 元素，然后再将 Canvas 元素导出为 PNG 图片。

步骤

以下为将 HTML 画布转换为 PNG 的具体步骤：

下载 HTML2Canvas 库并引入到 HTML 文件中，你可以从它的 GitHub 页面下载。
```
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
```

创建一个 Canvas 元素并将画布复制到这个 Canvas 上。

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");

var canvasImg = new Image();
canvasImg.src = 'path/to/canvas';

canvas.width = canvasImg.width;
canvas.height = canvasImg.height;
ctx.drawImage(canvasImg, 0, 0, canvas.width, canvas.height);

使用 HTML2Canvas 转换 Canvas 元素为 PNG 图片。

html2canvas(canvas).then(function (canvas) {
    document.body.appendChild(canvas);
});

示例

以下为一个简单的示例：

<!DOCTYPE html>
<html>
   <head>
       <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
   </head>
   <body>
       <canvas id="my-canvas" width="200" height="200"></canvas>
   </body>
   <script>
       var canvas = document.getElementById("my-canvas");
       var ctx = canvas.getContext("2d");

       ctx.fillStyle = "#FF0000";
       ctx.fillRect(0, 0, canvas.width, canvas.height);

       html2canvas(canvas).then(function (canvas) {
           document.body.appendChild(canvas);
       });
   </script>
</html>

使用 Canvas2Image

Canvas2Image 是一个可以将 Canvas 元素转换为 PNG 或 JPEG 图片的 JavaScript 库。它支持给图片添加超链接，并保留图像透明度信息。

步骤

以下为将 HTML 画布转换为 PNG 的具体步骤：

下载 Canvas2Image 库并引入到 HTML 文件中，你可以从它的 GitHub 页面下载。
```
<script src="https://github.com/hongru/canvas2image/blob/master/canvas2image.js"></script>
```

创建一个 Canvas 元素并将画布复制到这个 Canvas 上。

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");

var canvasImg = new Image();
canvasImg.src = 'path/to/canvas';

canvas.width = canvasImg.width;
canvas.height = canvasImg.height;
ctx.drawImage(canvasImg, 0, 0, canvas.width, canvas.height);

使用 Canvas2Image 库将 Canvas 元素转换为 PNG 图片。

var img = Canvas2Image.convertToPNG(canvas);
document.body.appendChild(img);

示例

以下为一个简单的示例：

<!DOCTYPE html>
<html>
   <head>
       <script src="https://github.com/hongru/canvas2image/blob/master/canvas2image.js"></script>
   </head>
   <body>
       <canvas id="my-canvas" width="200" height="200"></canvas>
   </body>
   <script>
       var canvas = document.getElementById("my-canvas");
       var ctx = canvas.getContext("2d");

       ctx.fillStyle = "#FF0000";
       ctx.fillRect(0, 0, canvas.width, canvas.height);

       var img = Canvas2Image.convertToPNG(canvas);
       document.body.appendChild(img);
   </script>
</html>

以上就是如何将 HTML 画布转换为 PNG 文件的方法。无论你选择使用 HTML2Canvas 还是 Canvas2Image，都可以轻松地将 HTML 画布转换为 PNG 图片。