Div to image with jQuery/JavaScript

Question

I am trying to convert div to image using html2canvas library. I tried but no success can't convert full div to image, the dropper is missing in image.

URL : https://www.makethatvape.com/ejuicecalc/

Tried with code:

html2canvas($("#widget")).then(function(canvas) {
   bimg = canvas.toDataURL();  // by default png
});

So, any idea how to overcome this problem. I played with html2canvas and it work for text and CSS div to canvas conversion.

Answer 1

Try this

<div id="copyDiv"></div>

---

    var element = $("#widget"); // global variable
    var getCanvas; // global variable

    html2canvas(element, {
             onrendered: function (canvas) {
                    $("#copyDiv").append(canvas);
                    getCanvas = canvas;
                 }
      });

Detail Article: Convert Div to Image in jQuery

Answer 2

Simpler way to do it:

var convertMeToImg = $('#myDiv')[0];

html2canvas(convertMeToImg).then(function(canvas) {
    $('#resultsDiv').append(canvas);
});

https://html2canvas.hertzen.com/getting-started