通过 html2canvas 将 div 转换为图像（内部带有 img 的 div 元素）不捕获图像答案

【问题标题】：Convert div to image by html2canvas (div element with img inside) not capturing image通过 html2canvas 将 div 转换为图像（内部带有 img 的 div 元素）不捕获图像
【发布时间】：2017-07-13 18:58:36
【问题描述】：

我正在使用html2canvas 将div 转换为image/png。当Selected div中有文本时，它可以正常工作，但是我中有一个图像。因此，当我单击按钮时，我看不到由html2canvas 创建的base64 图像中的图像。

我的代码是这样的；

这是我的脚本：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="html2canvas.js"></script>

<script>
   $(function(){

      $('.savedraft').click(function(){

          html2canvas([ document.getElementById('div2image') ],{
          onrendered: function(canvas) {
          window.open(canvas.toDataURL());

  }
});
      })

      });         

</script>

这是我的身体：

<div class="savedraft">Convert</div>
<div id="div2image" >
    <img src="WebSite5/html2canvas-master/tests/assets/image_1.jpg" />
</div>

【问题讨论】：

标签： jquery html2canvas

【解决方案1】：

将其设置为 div 背景图像，这样应该可以正常工作！

【讨论】：

【解决方案2】：

使用 canvas.toDataURL("image/png") 指定图片的类型

【讨论】：

【解决方案3】：

使用服务器运行项目，它会正常工作！

我遇到了同样的问题，但后来我使用 Visual Studio 运行了这个项目，它完美地捕获了 div 标签内的所有图像。 Read the link for further clarifications.

【讨论】：