CODEWITHSUNDEEP
javascriptjqueryhtmlhtml2canvas
Karthikeyan
Karthikeyan

Reputation: 1147

html2canvas not capturing image

html2canvas.js not capturing image. it leaves white space where the image occurs.

function capture()
{
    html2canvas(document.body, {
        allowTaint: true,
        logging:true,
        onrendered: function(canvas) {
        imagestring = canvas.toDataURL("image/png");
        console.log(imagestring);
        document.body.appendChild(canvas);
        }
    });
}

I have tried a lot but i cannot find solution .

Help is appreciated :)

Upvotes: 16

Views: 28393

Answers (4)

Utkarsh
Utkarsh

Reputation: 717

You will need to add the following options in html2canvas.

html2canvas(document.body, {
   allowTaint : true,
   useCors : true
}).then(function(canvas) { ... }

enter image description here

Upvotes: 15

BGS
BGS

Reputation: 1441

html2canvas did not render my source images when I used an image button made using html input tag:

<input type="image" src="...">

html2canvas works perfectly with img tags, though. So, I switched to html button tag (you can use url link tag similarly) and inserted img tag inside it:

<button type="button"><img src="..."></button>

Also I found that html2canvas can render image if it is a background-image added in styles (you can keep your input tags!):

in styles:
...#mybutton{
        background-image: url(...);
        background-repeat: no-repeat;
        background-size: 30px 30px;
        background-color:transparent;
    }
in html:
<input id="mybutton" type="image">
<button id="mybutton" type="button"></button>

The later is particularly helpful if you have video tags. html2canvas does not render poster image for it, so all you have to do is to add that poster image to background-image of your video tag in styles and you will get the picture for your video.

Hope this workaround helps somebody.

Upvotes: -1

Sima Nongwe
Sima Nongwe

Reputation: 67

If you're experiencing the issue only in production but locally it works, without the AllowTaint attribute it wont work in production. so Add that.

See example:

see example

Upvotes: 3

Karthikeyan
Karthikeyan

Reputation: 1147

It works, when I host it in the server. The security restrictions causes it to fail.

Upvotes: 12

Related Questions