html2canvas 将 div 转换为画布，然后转换为图像答案

【问题标题】：html2canvas to convert div to canvas and then to imagehtml2canvas 将 div 转换为画布，然后转换为图像
【发布时间】：2021-12-06 05:47:01
【问题描述】：

我想将 div 转换为画布，然后最终转换为图像。所以我正在使用 html2canvas 库。我尝试过下载图片、在新窗口中打开图片以及附加到 div，但都没有成功。

$(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");
          // download the generated image
          downloadURI(myImage, "final_image.png");
          // Open the image in a new window
          window.open(myImage , "_blank");
          // display it in div
          $("#bottom").append(myImage);
      });
  });
});

<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>
<img src="images/download.jpg" id="final_download">
<div class="bottom"></div>

知道我在这里做错了什么吗？

【问题讨论】：

标签： javascript html jquery html2canvas

【解决方案1】：

我试图运行你的代码，但它只是缺少一个dowloadURL 函数（Vanilla JS 中没有这样的东西）。

我只是添加了以下代码，然后一切都按预期工作：

function downloadURI(uri, name) {
    var link = document.createElement("a");
    link.download = name;
    link.href = uri;
    link.click();
}

仅供参考，我发现了这个功能here

【讨论】：