用html2canvas下载div格式图片时添加标题

<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.3.2/dist/html2canvas.min.js"></script>

<div id="container">
  <h1>图片标题</h1>
  <div id="targetDiv">
    <!-- 目标div的内容 -->
  </div>
</div>

// 获取目标div和标题的元素
var container = document.getElementById("container");
var targetDiv = document.getElementById("targetDiv");

// 使用html2canvas将目标div渲染为Canvas
html2canvas(targetDiv).then(function(canvas) {
  // 创建一个新的Canvas来合并标题和目标div的Canvas
  var mergedCanvas = document.createElement("canvas");
  var context = mergedCanvas.getContext("2d");
  mergedCanvas.width = canvas.width;
  mergedCanvas.height = canvas.height + 50; // 标题高度为50px，根据实际情况调整

  // 绘制标题
  context.fillStyle = "#000000"; // 标题颜色，根据实际情况调整
  context.font = "20px Arial"; // 标题字体样式，根据实际情况调整
  context.fillText("图片标题", 10, 30); // 标题位置，根据实际情况调整

  // 绘制目标div的Canvas
  context.drawImage(canvas, 0, 50); // 目标div的Canvas位置，根据实际情况调整

  // 将合并后的Canvas导出为图片并下载
  var link = document.createElement("a");
  link.href = mergedCanvas.toDataURL("image/png");
  link.download = "div_image.png"; // 下载的图片文件名，根据实际情况调整
  link.click();
});