Uncaught (in promise) dom-to-image答案

【问题标题】：Uncaught (in promise) dom-to-imageUncaught (in promise) dom-to-image
【发布时间】：2021-11-25 22:12:42
【问题描述】：

我有一个包含多个 canvas html 元素的页面。该网站实际上是用 angularjs 构建的，上面显示了在 Qlik 中创建的图表。我正在尝试获取在浏览器上呈现为画布元素的各个图表的屏幕截图。

使用https://github.com/tsayen/dom-to-image，我可以使用以下代码获取第一张图表的屏幕截图：

var node = document.getElementById(divToPrint);
    domtoimage.toPng(node)
        .then(function (dataUrl) {
            var link = document.createElement('a');
            link.download = divToPrint + '.png';
            link.href = dataUrl;
            link.click();
        });

但是，对于所有其他图表，我收到以下错误：

Uncaught (in promise) Event {isTrusted: true, type: "error", target: null, currentTarget: null, eventPhase: 0, …}
Promise.then (async)

我发现有人已经在 github 上发布了这个但没有答案： https://github.com/tsayen/dom-to-image/issues/181

代码中是否缺少某些内容？

【问题讨论】：

我从未使用过该库，但似乎您应该使用 dataUrl 作为图像元素的 src。它是一个“数据：”URL，即它是构成图像的实际字节的编码。我通过查看项目页面上的示例得出这个结论。
这将允许用户下载图像。项目页面上的示例是 JPEG 图像，我使用它保存为 PNG 图像：保存并下载压缩的 JPEG 图像：domtoimage.toJpeg(document.getElementById('my-node'), { quality: 0.95 }) 。然后（函数（dataUrl）{ var link = document.createElement('a'); link.download = 'my-image-name.jpeg'; link.href = dataUrl; link.click(); });跨度>
stackoverflow.com/questions/48926412/… - 它可能是相关的，但我不熟悉 Promise 对象。
github issue 已经关闭了，请问他们是怎么解决的？
你用的是qlikview还是qliksense？

标签： javascript angularjs promise qlikview qliksense

【解决方案1】：

您可以使用https://github.com/tsayen/dom-to-image 进行尝试。下面是简单的代码。

var node = document.getElementById(divToPrint);
domtoimage.toBlob(document.getElementById('node'))
    .then(function (blob) {
        saveAs(blob, 'my-node.png');
    });

但您必须为此使用 fileSaver.js。你可以从这里得到它https://github.com/eligrey/FileSaver.js/

并将其导入为import { saveAs } from 'file-saver';。在你的项目中。

【讨论】：

【解决方案2】：

我也面临同样的问题。请确保将 div 应用于 div 而不是 svg、g 或任何其他标签。如果您的节点写在 ts 文件中，那么我建议尝试将节点放在 html 文件中.

【讨论】：

【解决方案3】：

我知道这是一个老问题，但万一其他人有这个问题......

我的问题是我有一个格式错误的 HTML 文件，这导致 dom-to-image 无法生成正确的图像。

我能够通过更改我正在制作图像的 DIV 来找到此问题，直到我能够缩小导致问题的部分。一旦我能够看到有问题的部分，就很容易看到错字。修正后，dom-to-image 完美运行！

【讨论】：

【解决方案4】：

这样你就不需要filesaver

domtoimage.toPng(document.getElementById('areaChart'), { quality: 0.95 })
.then(function (dataUrl) {
    var link = document.createElement('a');
    link.download = 'area-chart.png';
    link.href = dataUrl;
    link.click();
});

【讨论】：