Question

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

Answer 1

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

下载画布到PNG黑色背景

1 个答案: