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, ' $1').trim());
                    a.click();
                }
             });
            };

有人知道如何使图表列ID成为标题吗？

Answer 1

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

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();
    }
  });
};

在画布上的外观示例：

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下载为图像时添加标题

1 个答案: