使用html2canvas将div转canvas再生成图片功能失效，请问问题出在哪？

• 未定义downloadURI函数：代码中直接调用了downloadURI方法实现下载，但没有编写该函数的实现逻辑，下载功能无法触发。
• DOM选择器匹配错误：HTML中存放图片的容器是class="bottom"，属于类选择器，但JS中使用了ID选择器$("#bottom")，无法选中对应DOM节点，图片追加逻辑自然不生效。
• 图片追加逻辑错误：直接将base64格式的图片字符串追加到div中，只会渲染为纯文本，需要先创建img标签，将base64赋值给img的src属性后再追加到容器中。
• 新窗口打开逻辑被浏览器拦截：绝大多数浏览器的安全策略会拦截window.open打开的data URI链接，该实现方式本身不符合浏览器交互规则。

JS代码 #

// 先实现downloadURI下载函数
function downloadURI(uri, name) {
  var link = document.createElement("a");
  link.download = name;
  link.href = uri;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

$(document).ready(function (e) {
  $("#final_download").click(function() {
      html2canvas($("#final_image_div")[0]).then(function (canvas) {
          console.log(canvas);
          var myImage = canvas.toDataURL("image/png");
          // 下载生成的图片
          downloadURI(myImage, "final_image.png");
          // 替换新窗口打开逻辑，避免被浏览器拦截
          var openLink = document.createElement("a");
          openLink.href = myImage;
          openLink.target = "_blank";
          document.body.appendChild(openLink);
          openLink.click();
          document.body.removeChild(openLink);
          // 修正图片追加逻辑和选择器
          var img = new Image();
          img.src = myImage;
          $(".bottom").append(img);
      });
  });
});

HTML代码 #

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.3/html2canvas.min.js"></script>

<div id="final_image_div">abcdef</div>
<!-- 增加cursor属性提示可点击 -->
<img src="images/download.jpg" id="final_download" style="cursor:pointer;">
<div class="bottom"></div>

内容的提问来源于stack exchange，提问作者lwd