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

Question

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.

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

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> 

Answer 1

html2canvas or Canvas2Image does not work with external images.

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>