html2canvas 插件和WdatePicker插件发生冲突！！！

Question

基于bootstrap 框架中引入My97 DatePicker 4.2时间插件，同时要实现同时将界面中多个canvas中的效果导出为一张图因此引入了html2canvas 0.5.0-beta3插件实现图片的导出功能，但是在点击导出时，可以成功导出图片但是底部有报错，
具体的实现方法在下面
//导出图片的实现放大
//id为要导出区域的id
html2canvas($("#" +id)).then(function (canvas) {
var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url
var saveLink = document.createElement('a');
saveLink.href = imgUri;
saveLink.download = '截图.png';
saveLink.click();
});
报错的截图如下：

哪位大神有遇到过同样的问题，求解。

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

HTML5 Canvas支持PNG格式，所以你使用到的toDataURL()方法是正确的。然而，当你尝试获取这个DataURL并创建一个元素时，你需要确保它包含download属性，并且设置为你要保存的文件名（例如：'截图.png'）。此外，你应该避免使用.click()方法来触发下载操作，因为这可能会导致浏览器阻止你的脚本执行，从而引发错误。你可以通过添加事件监听器或使用e.preventDefault()来解决这个问题。 以下是一个修复后的示例代码：

// 导出图片的实现放大
const canvas = $("#id_of_your_canvas_element");
html2canvas(canvas)
  .then((canvas) => {
    const imgUri = canvas.toDataURL("image/png");

    let saveLink = document.createElement("a");
    saveLink.href = imgUri;
    saveLink.download = "截图.png";
    saveLink.click();
  })
  .catch((error) => console.error(error));

请注意，你需要替换上述代码中的#id_of_your_canvas_element为你实际使用的Canvas元素ID。另外，如果你的应用中有其他依赖于DOM的操作，请确保它们也正确处理了这些更改。