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