下载画布到PNG黑色背景答案

【问题标题】：Download canvas to PNG black background下载画布到PNG黑色背景
【发布时间】：2017-11-10 19:05:57
【问题描述】：

我正在使用 Charts.js 和 Bootstrap 在画布上构建一些图表。用户希望能够下载图表的 PNG 文件以将其复制到 Powerpoint 幻灯片中。我有以下功能工作，它下载文件，但它有一个完全黑色的背景。在页面上，图像具有白色背景。我看到一堆关于 JPEG 的帖子，解决方案说使用 PNG，但我正在使用 PNG。不确定画布本身是否有什么可以改变的。我已尝试将画布的背景颜色显式设置为白色，但这无济于事。

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

【问题讨论】：

保存的图像本身是黑色背景还是只有在传递给 power-point 时才出现？它真的是背景还是整个图像完全是黑色的？在画布上初始化了什么样的上下文？你是如何尝试添加白色背景的？你能加一个minimal reproducible example吗？

标签： javascript html canvas

【解决方案1】：

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

【讨论】：

这有帮助。谢谢你。我追溯了一些 CSS 并找到了它。