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

I am put canvas into one HTML div, After that i am converting this div into image using Html2canvas. HTML div successfully converted, but background image is not come.

我将canvas放入一个HTML div中,之后我将这个div转换为使用Html2canvas的图像。 HTML div已成功转换,但背景图像未到来。

I have seen one link but i am not sure. Because i have not seen any background image. Javascript html2canvas cant get background

我看过一个链接,但我不确定。因为我还没有看到任何背景图片。 Javascript html2canvas无法获得背景

please suggest me any idea.

请建议我任何想法。

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

1 个解决方案

#1

html2canvas or Canvas2Image does not work with external images.

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

All the images that the script uses need to reside under the same origin for it to be able to read them.Ref

脚本使用的所有图像都需要位于相同的原点以便能够读取它们

Use relative path for the images and Try:

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

Working code:

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

#1