html2canvas not capturing image

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

Duquette

are u trying to use HTML5/Canvas/JavaScript to take screenshots? – Bead

am using html2canvas.js to take screenshots. – Duquette

see here:html2canvas.hertzen.com/examples.html – Miasma

@Suchit Kumar. Yes am working on the same example. But It captures only the text not images. – Duquette

try hosting your site statically with node, then your images should come through, here is an example of statically hosting your site with node/express github.com/StevenIseki/exs – Enate

Answer 1

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

Duquette

Hi @Duquette I have try but it is not capture images and some svg elements – Impossibility

Hi Rahul, Are you using hml2canvas.js to take screenshots? Which platform you are using either mobile or desktop? Did you try it after hosting in the server, like wamp? – Duquette

I have developed a application e-learning system using nodejs and webrtc. Now I have to add screen recording module in it so for this I am using webrtc-experiment.com/RecordRTC this API. In which they use html2canvas library to screen shot the webpage to record the screen. But in my page as a whiteboard I am using svg elements. So when I record the screen using this API its record only basic html5 element but not svg and images inside svg element. – Impossibility

Did you try after hosting it in the server? – Duquette

Hi Rahul, sorry for the delay, In your case, i don't know whether nodejs server is acting like wamp or xampp to support html2cancvas. Do one thing, try to run html2canvas file alone in wamp or xampp server, to debug where the problem exactly occurs. – Duquette

Yes I have try this but still not getting images from svg element – Impossibility

Let us continue this discussion in chat. – Impossibility

Hi sorry its my mistake. It capturing img tags but problem is its not capturing svg element images – Impossibility

html2canvas.js does not support svg. see the FAQ in html2canvas official website. html2canvas.hertzen.com/faq.html Alternative solution is you can convert svg content to an image and capture. hope this way will work. – Duquette

@Duquette did you get solution for images which are hosted in other server? – Tess

@NikhilRadadiya. Sorry I didn;t try to host in other servers. – Duquette

@Duquette so did you host it in same server? – Tess

@NikhilRadadiya. Yes. – Duquette

@Duquette Anyways, I got the solution – Tess

Answer 2

You will need to add the following options in html2canvas.

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

Clinical

Answer 3

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:

Deformation

Answer 4

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.

Amandie