如何使用 html2canvas将DOM转换成canvas 并保存为图片

18 min read

您可以按照以下步骤使用 html2canvas 将 DOM 转换为 canvas 并保存为图片：

  1. 引入 html2canvas 库
<script src="path/to/html2canvas.min.js"></script>
  1. 编写 JavaScript 代码
// 获取要转换成图片的 DOM 元素
var element = document.getElementById("myDiv");

// 使用 html2canvas 将 DOM 转换为 canvas
html2canvas(element).then(function(canvas) {
  // 创建一个 <a> 标签，并设置其 download 属性为要保存的图片的文件名
  var link = document.createElement("a");
  link.download = "myImage.png";

  // 将 canvas 转换成图片的 Base64 编码
  var image = canvas.toDataURL("image/png");

  // 将图片的 Base64 编码设置为 <a> 标签的 href 属性，并触发点击事件进行下载
  link.href = image;
  link.click();
});
  1. 完成

现在，您可以在浏览器中运行该代码，它将把指定的 DOM 元素转换为 canvas 并将其保存为 PNG 图片。注意，代码中的 myDiv 应替换为您要转换的 DOM 元素的 ID。