javascript - 下载 Canvas 至PNG黑色背景

Question

我正在使用 Charts.js 和 Bootstrap 在 Canvas 上构建一些图表。用户希望能够下载图表的 PNG 文件并将其复制到 Powerpoint 幻灯片中。我有以下功能正在运行，它会下载文件，但它有一个全黑的背景。页面上的图像具有白色背景。我看到很多关于 JPEG 的帖子，解决方案说使用 PNG，但我正在使用 PNG。不确定 Canvas 本身是否可以更改某些内容。我尝试将 Canvas 的背景颜色显式设置为白色，但这没有帮助。

downloadToPNG 函数:

function downloadToPNG() {
    var canvas   = document.getElementById('parentCanvas');
    var dt = canvas.toDataURL('image/png');
    var hiddenElement = document.createElement('a');
    hiddenElement.href = dt;
    hiddenElement.target = '_blank';
    hiddenElement.download = fileName;
    hiddenElement.click();
    hiddenElement.remove();
}

Answer 1

背景可能是因为一些丢失的级联 CSS 值，您可能需要仔细检查 html、body 和每个父元素的背景颜色。这也可能与以 base64 编码传递的 png 信息有关，这是浏览器将图像信息哈希为字母数字的正常方法。此线程可能会对此有所帮助 how to save canvas as png image?