html2canvas 不捕捉图像

Question

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

Answer 1

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

Answer 2

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:

Answer 3

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.

Answer 4

You will need to add the following options in html2canvas.

allowTaint: true
useCORS: true