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: /

Tried with code:

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

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

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./ejuicecalc/

Tried with code:

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

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

• javascript
• jquery
• css
• html2canvas

• unable to accept edits ... , that's bad , new user should accept edits to their question , experienced user with 2k may not need this feature – user889030 Commented Sep 22, 2016 at 18:50

2 Answers 2

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;
                 }
      });

Note: If HTML markup contains an image tag, then for some browsers the above code will not be able to create the image of it. To make this work you need to use 2 parameters i.e. allowTaint, useCORS

Sample code :

html2canvas(document.getElementById("html-content-holder"), {
            allowTaint: true, useCORS: true
        }).then(function (canvas) {
            var anchorTag = document.createElement("a");
            document.body.appendChild(anchorTag);
            document.getElementById("previewImg").appendChild(canvas);
            anchorTag.download = "filename.jpg";
            anchorTag.href = canvas.toDataURL();
            anchorTag.target = '_blank';
            anchorTag.click();
        });

Detail Article: Convert HTML to image using jQuery / Javascript with live demos

Simpler way to do it:

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

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

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