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

我试过这样的东西，但它不起作用，没有标题出现。我把.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" />