html2canvas not capturing image

javascript jquery html html2canvas

16,102

Solution 1

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

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

see example

16,102

Karthikeyan

Updated on June 04, 2022

Comments

Karthikeyan almost 2 years

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

Rahul_Dabhi almost 9 years

Hi @Karthikeyan I have try but it is not capture images and some svg elements
Karthikeyan almost 9 years

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?
Rahul_Dabhi almost 9 years

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.
Karthikeyan almost 9 years

Did you try after hosting it in the server?
Karthikeyan almost 9 years

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.
Rahul_Dabhi almost 9 years

Yes I have try this but still not getting images from svg element
Rahul_Dabhi almost 9 years

Let us continue this discussion in chat.
Rahul_Dabhi almost 9 years

Hi sorry its my mistake. It capturing img tags but problem is its not capturing svg element images
Karthikeyan almost 9 years

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.
Nikhil Radadiya over 6 years

@Karthikeyan did you get solution for images which are hosted in other server?
Karthikeyan over 6 years

@NikhilRadadiya. Sorry I didn;t try to host in other servers.
Nikhil Radadiya over 6 years

@Karthikeyan so did you host it in same server?
Karthikeyan over 6 years

@NikhilRadadiya. Yes.
Nikhil Radadiya over 6 years

@Karthikeyan Anyways, I got the solution