Javascript 我在使用html2Canvas创建下载png时遇到以下错误

创建网站时，我使用了

html2canvas

，它将文本转换为图像。转换已成功完成，但在尝试单击按钮下载时， 我得到了以下错误：

有谁能帮我解决这个问题吗

附：我对网页设计完全是新手

html2canvas(document.getElementById("myname"), {
  onrendered: function (canvas) {
    var screenshot = canvas.toDataURL("image/png");
    document.getElementById("textScreenshot").setAttribute("src", screenshot);
  },
});

btnDownload.addEventListener("click", function () {
  if (window.navigator.msSaveBlob) {
    window.navigator.msSaveBlob(textScreenshot.msToBlob(), "sg.png");
  } else {
    const a = document.createElement("a");
    document.body.appendChild(a);
    a.href = screenshot.toDataURL();
    a.download = "sg.png";
    a.click();
    document.body.removeChild(a);
  }
});

---

错误：texttoimg.html:99未捕获引用错误：未定义屏幕截图

---

在HTMLButtoneElement。

发生这种情况是因为您的

屏幕截图

变量的作用域是本地的

onrendered

函数。您需要将其取出并存储在全局变量中，以便能够在另一个函数中访问它

let screenshot; // making it global 
window.onload = function(){
    html2canvas(document.getElementById("myname"), {
      onrendered: function (canvas) {
        screenshot = canvas.toDataURL("image/png");
        document.getElementById("textScreenshot").setAttribute("src", screenshot);
      },
    });
 }

btnDownload.addEventListener("click", function () {
  if (window.navigator.msSaveBlob) {
    window.navigator.msSaveBlob(textScreenshot.msToBlob(), "sg.png");
  } else {
    const a = document.createElement("a");
    document.body.appendChild(a);
    a.href = screenshot; // remote toDataURL from here
    a.download = "sg.png";
    a.click();
    document.body.removeChild(a);
  }
});

---

您的屏幕截图没有显示错误文本。请发布错误文本。texttoimg.html:99未捕获引用错误：未在HTMLButtoneElement中定义屏幕截图。这是我在控制台中得到的。之所以发生这种情况，是因为您的

屏幕截图

变量的作用域位于

onrendered

函数中。您需要将其取出并存储在全局变量中，以便能够在其他函数中访问它我很抱歉地告诉您，但我无法执行此操作：C您现在遇到了什么错误？未捕获的TypeError:无法读取HtmlButtoneElement中未定义的属性“toDataURL”。现在遇到此错误：请在需要时添加相关的html代码调用html2canvas函数。尝试在

窗口上调用它。onload

。