Javascript JS下载添加文本的图像

我对堆栈溢出还比较陌生，所以在问这个问题时，我会尽量做到彻底和简洁。我正在做一个项目，刚刚实现了一个函数来打印图形的png图像（使用D3.js）。现在我想在下载的png中添加一个日期（或文本）（仅当它已下载时）。我一直在尝试各种各样的事情，但运气不佳。有什么想法吗

window.printPNG = function () {
    // Inputs
    var mySVG = document.getElementById('the-bubble-chart');
    var myXML = (new XMLSerializer()).serializeToString(mySVG);

    // Outputs
    var myCanvas = document.getElementById('canvg-output');
    var myImg = document.getElementById('png-output');
    var myA = document.getElementById('png-link');

    canvg(myCanvas, myXML);

    var dataURL = myCanvas.toDataURL('image/png');
    var dataURLHeaders = "data:application/octet-stream;headers=Content-Disposition%3A%20attachment%3B%20filename=download.png;";

    // Format file name for download
    var d = new Date(),
        dateString = d.getMonth() + 1 + "-" + d.getDate() + "-" + d.getFullYear().toString();

    myImg.src = dataURL;
    myA.href = dataURL.replace('data:', dataURLHeaders);
    myA.download = dateString + "_" + "download.png";
    myA.click()
}

---

在将文本转换为png之前，可以将其直接添加到画布：

...
canvg(myCanvas, myXML);

// Format file name for download
var d = new Date(),
dateString = d.getMonth() + 1 + "-" + d.getDate() + "-" + d.getFullYear().toString();

// add date to canvas
var ctx = myCanvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText(dateString,10,50);

var dataURL = myCanvas.toDataURL('image/png');
...

---

完整代码：

---

在将文本转换为png之前，您可以将文本直接添加到画布：

...
canvg(myCanvas, myXML);

// Format file name for download
var d = new Date(),
dateString = d.getMonth() + 1 + "-" + d.getDate() + "-" + d.getFullYear().toString();

// add date to canvas
var ctx = myCanvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText(dateString,10,50);

var dataURL = myCanvas.toDataURL('image/png');
...

---

完整代码：

此问题可能应作为重复问题结束，请参见此处：。我会暂时保留它，以防技术发生变化，但我认为这个问题仍然是事情的现状。谢谢你发布这个链接。如果这篇文章是重复的，我道歉。我试着搜索，但什么也找不到。我相信我的问题的不同之处在于我并不是简单地试图下载一张图片。我的图像下载功能运行良好。我正在尝试打印图像下载后的日期。感谢您的回复。您是要将日期添加到图像中还是要将日期添加到文件名中？如果是后者，那么另一个问题就是你不能跨浏览器可靠地完成它。如果您试图将其添加到图像中，您的代码并不能真正反映这一点。还有一件事，如果您想将其添加到图像中，这是非常有能力的，我很乐意键入答案。只要让他们知道。我正在尝试将其添加到图像本身。你是对的，它没有反映在代码中，因为不幸的是，我没能想出任何东西。如果您有任何帮助，我们将不胜感激。此问题可能会作为重复问题结束，请参阅此处：。我会暂时保留它，以防技术发生变化，但我认为这个问题仍然是事情的现状。谢谢你发布这个链接。如果这篇文章是重复的，我道歉。我试着搜索，但什么也找不到。我相信我的问题的不同之处在于我并不是简单地试图下载一张图片。我的图像下载功能运行良好。我正在尝试打印图像下载后的日期。感谢您的回复。您是要将日期添加到图像中还是要将日期添加到文件名中？如果是后者，那么另一个问题就是你不能跨浏览器可靠地完成它。如果您试图将其添加到图像中，您的代码并不能真正反映这一点。还有一件事，如果您想将其添加到图像中，这是非常有能力的，我很乐意键入答案。只要让他们知道。我正在尝试将其添加到图像本身。你是对的，它没有反映在代码中，因为不幸的是，我没能想出任何东西。任何帮助都将不胜感激。谢谢。这绝对适合我（稍微调整了一下代码）。我试图提高这一点，但我的声誉仍然太低。如果你能投票支持我的问题，那就太棒了（没有压力或任何事情）。但我真的很感谢你的帮助！是否仍然需要将ctx变量添加到myA.download变量？ctx varialbe正是我所需要的，我仍在努力让日期显示在下载的图表上。@StephenRoss，我不明白这个问题。上面的代码是一个完整的示例，下载时不包括日期吗？我确实注释掉了

myA.click（）

，这样图像就不会自动下载，也不会惹恼所有访问此问题的人。对不起，我应该更好地说明这个问题。下载完png图像后，我在显示日期方面遇到了一些问题。似乎我需要在inline

myImg.src=dataURL中的某个地方传入CTX变量；myA.href=dataURL.replace（'data:'，dataURLHeaders）；myA.download=dateString+“+”download.png”@StephenRoss，很不幸，我还是不明白。当您按下上面的“运行代码片段”按钮时，我的代码示例对您有用吗？您是否将该代码集成到您的代码库中？如果第一个问题的答案是肯定的，第二个是否定的，你改变了什么？您的控制台上有任何错误吗？“把CTX变量传递到某个地方”，我不明白。ctx变量保存画布上下文。这是你用来在画布上画或写的东西。您可以从画布上获取上下文，在画布上书写，将画布转换为PNG，其中包含已有的文本。谢谢。这绝对适合我（稍微调整了一下代码）。我试图提高这一点，但我的声誉仍然太低。如果你能投票支持我的问题，那就太棒了（没有压力或任何事情）。但我真的很感谢你的帮助！是否仍然需要将ctx变量添加到myA.download变量？ctx varialbe正是我所需要的，我仍在努力让日期显示在下载的图表上。@StephenRoss，我不明白这个问题。上面的代码是一个完整的示例，下载时不包括日期吗？我确实注释掉了
myA.click（）
，这样图像就不会自动下载，也不会惹恼所有访问此问题的人。对不起，我应该更好地说明这个问题。下载完png图像后，我在显示日期方面遇到了一些问题。似乎我需要在inline
myImg.src=dataURL中的某个地方传入CTX变量；myA.href=dataURL.replace（'data:'，dataURLHeaders）；myA.download=dateString+“+”download.png”@StephenRoss，很不幸，我还是不明白。当您按下上面的“运行代码片段”按钮时，我的代码示例对您有用吗？您是否将该代码集成到您的代码库中？如果第一个问题的答案是