html2canvas 给出空白图像

Question

当我截屏时，我正在尝试使用 html2canvas 截屏我的 react 应用程序中的某些组件，但无论我尝试什么，图像总是变成空白。

这就是我的屏幕截图按钮的 onClick 侦听器中的代码。

            const help = document.querySelector("#help");
            html2canvas(help).then((canvas) => {
              console.log(help, canvas);
              const a = document.createElement("a");
              a.href = canvas.toDataURL("image/png");
              a.download = "help.png";
              a.click();
            });

这是#help 元素所包含的内容。

      <ul id="help">
        <li>Lorem</li>
        <li>lorem</li>
        <li>lorem</li>
        <li>lorem</li>
      </ul>

console.log 语句显示在 querySelector 中选择了正确的元素。我什至尝试根据我在此处的其他答案中看到的内容更改诸如 allowTaint、backgroundColor、foreignObjectRendering、useCORS 等字段，但这些似乎都不适合我。如果删除我所有的自定义 css 可能会有所帮助，但即使那样它也无法正常工作，也尝试过。将日志记录设置为 true 也没有给我任何输出，所以我几乎不知道从哪里开始。

Answer 1

尝试使用getElementById，它会起作用。

const getPrint = () => {
    const input = document.getElementById('headerr');
    html2canvas(input).then((canvas) => {
        document.body.appendChild(canvas);
        var imgWidth = 210;
        var pageHeight = 295;
        var imgHeight = (canvas.height * imgWidth) / canvas.width;
        var heightLeft = imgHeight;
        const imgData = canvas.toDataURL('image/png');
        //window.open(imgData);
        const pdf = new jsPDF('p', 'mm');
        var position = -2;
        pdf.addImage(imgData, 'JPEG', 0, position, imgWidth, imgHeight);
        heightLeft -= pageHeight;

        /* add extra pages if the div size is larger than a a4 size */
        while (heightLeft >= 0) {
            position = heightLeft - imgHeight;
            pdf.addPage();
            pdf.addImage(imgData, 'JPEG', 0, position, imgWidth, imgHeight);
            heightLeft -= pageHeight;
        }
        pdf.save('file.pdf');
    });
};