HTML Div convert into image with background image 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>

@Rayon Dabre. Background image is not come after click on save Png button. — Varun Sharma
– Varun Sharma, Commented Jan 28, 2016 at 6:12

Rayon · Accepted Answer · 2016-01-28 06:54:29Z

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>

answered Jan 28, 2016 at 6:54

Rayon

36.6k5 gold badges54 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Varun Sharma Over a year ago

Thanks. But why not taking server uploaded image.

Collectives™ on Stack Overflow

HTML Div convert into image with background image Html2canvas

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related