使用 html2canvas 下载 div 作为图像时添加标题

Question

我有一个使用 html2canvas 下载一些 div 作为图像的功能。我还希望能够在保存图像时在图像顶部添加一个标题，即 chartColumnID。

  function saveAsImage(chartColumnID){
            html2canvas($('#'+ chartColumnID),
            {
                onrendered: function (canvas) {
                var a = document.createElement('a');
                    a.href = canvas.toDataURL("image/png");
                    a.download = chartColumnID;
                    a.click();
                }
             });
            };

我试过类似的方法，但没有用，没有标题出现。我将 a.text= 移动到不同的行以仔细检查我是否将它放在错误的位置但没有运气。

 function saveAsImage(chartColumnID){
            html2canvas($('#'+ chartColumnID),
            {
                onrendered: function (canvas) {
                var a = document.createElement('a');
                    a.href = canvas.toDataURL("image/png");
                    a.download = chartColumnID;
                    a.text= (15, 15, chartColumnID.replace(/([A-Z])/g, ' ').trim());
                    a.click();
                }
             });
            };

有没有人知道如何让图表列 ID 也成为标题？

Answer 1

您可以尝试在 canvas 上绘制文本（我没有检查过）：

function saveAsImage(chartColumnID) {
  html2canvas($('#' + chartColumnID), {
    onrendered: function(canvas) {
// ----------------------------- here we draw text:
      const fontHeight = 14;
      const text = String(chartColumnID);
      const ctx = canvas.getContext("2d");
      ctx.font = fontHeight + "px Arial";
      ctx.textAlign = "left";
      ctx.fillStyle = "red"; // text color
      ctx.fillText(text, 0, fontHeight);
// ------------------------------ your code as ususal:
      var a = document.createElement('a');
      a.href = canvas.toDataURL("image/png");
      a.download = chartColumnID;
      a.click();
    }
  });
};

在 canvas 上的外观示例：

var canvas = document.getElementById("c");
var chartColumnID = (Math.random() * 1000 + 1) | 0;
canvas.width = 100;
canvas.height = 100;

const fontHeight = 14;
const text = String(chartColumnID);
const ctx = canvas.getContext("2d");
ctx.font = fontHeight + "px Arial";
ctx.textAlign = "left";
ctx.fillStyle = "red"; // text color
ctx.fillText(text, 0, fontHeight);

canvas { border: 1px solid }

<canvas id="c" />

使用 html2canvas 下载 div 作为图像时添加标题

adding a title when downloading div as image with html2canvas

javascript

text

html2canvas