HTML Div 转换为带有背景图像 Html2canvas 的图像

Question

我将画布放入一个 HTML div 中，之后我使用 Html2canvas 将此 div 转换为图像。 HTML div 转换成功，但是背景图片没有出来。

我看过一个链接，但我不确定。因为我没有看到任何背景图片。 Javascript html2canvas cant get background

请给我任何建议。

$(function() { 
    $("#btnSave").click(function() { 
        html2canvas($("#html-to-canvas"), {
            onrendered: function(canvas) {
                theCanvas = canvas;
                document.body.appendChild(canvas);          
                Canvas2Image.saveAsPNG(canvas); 
                $("#canvas-image").append(canvas);              
            }
        });
    });
}); 

 .bg-img
   {
   		background-image:url('https://d2z4fd79oscvvx.cloudfront.net/0016463_petal_diamond_ring_320.jpeg');
   		background-repeat: no-repeat;
   		 
   }

<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="https://raw.github.com/niklasvh/html2canvas/gh-pages/build/html2canvas.js"></script>
  
<script src="https://raw.github.com/niklasvh/html2canvas/v0.34/src/plugins/jquery.plugin.html2canvas.js"></script>
  <div style="width:450px;height:500px;border:1px solid #333" class=" html-to-canvas bg-img"   id="html-to-canvas">   
            <canvas id="canvas" style="margin-left:100px;margin-top:150px" width="200" height="300"></canvas>
   </div>
<input type="button" id="btnSave" value="Save PNG"/>
<div id="canvas-image"></div>

Answer 1

html2canvas 或 Canvas2Image 不适用于外部图像。

脚本使用的所有图像都需要位于同一来源下才能读取它们。Ref

使用图像的相对路径并尝试：

工作代码：

$(function() {
  $("#btnSave").click(function() {
    html2canvas($("#html-to-canvas"), {
      onrendered: function(canvas) {
        Canvas2Image.saveAsPNG(canvas);
        $("#canvas-image").append(canvas);
      }
    });
  });
});

.bg-img {
  background-image: url('images/0016463_petal_diamond_ring_320.jpeg');
  background-repeat: no-repeat;
}

<div style="width: 450px; height: 500px; border: 1px solid #333" class=" html-to-canvas bg-img" id="html-to-canvas">
  <canvas id="canvas" style="margin-left: 100px; margin-top: 150px" width="200" height="300"></canvas>
</div>
<input type="button" id="btnSave" value="Save PNG" />
<div id="canvas-image"></div>