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

Question

我html2canvas用来转换div为image/png. It works fine when there is a text in selected divbut I have an image in it. 因此，当我单击按钮时，我无法在创建的图像中看到base64图像html2canvas。

我的代码是这样的；

这是我的脚本：

<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> 

Answer 1

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

Answer 2

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

Answer 3

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

我遇到了同样的问题，但后来我使用 Visual Studio 运行了这个项目，它完美地捕获了 div 标签内的所有图像。 阅读链接以获得进一步说明。