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

are u trying to use HTML5/Canvas/JavaScript to take screenshots? — , Jan 03 '15 at 11:58
@Suchit Kumar. Yes am working on the same example. But It captures only the text not images. — Karthikeyan, Jan 03 '15 at 12:18
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 https://github.com/StevenIseki/exs — svnm, Sep 22 '15 at 00:16

Karthikeyan · Accepted Answer · 2015-02-10T10:56:00.687

13

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

edited Feb 10 '15 at 10:56

answered Jan 05 '15 at 03:57

Karthikeyan

1,119
1
15
33

Hi @Karthikeyan I have try but it is not capture images and some svg elements – Rahul_Dabhi Jun 11 '15 at 06:53
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? – Karthikeyan Jun 11 '15 at 07:00
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 https://www.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. – Rahul_Dabhi Jun 11 '15 at 07:07
Did you try after hosting it in the server? – Karthikeyan Jun 11 '15 at 07:29
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. – Karthikeyan Jun 12 '15 at 04:07
Yes I have try this but still not getting images from svg element – Rahul_Dabhi Jun 12 '15 at 06:44
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/80354/discussion-between-rahul-dabhi-and-karthikeyan). – Rahul_Dabhi Jun 12 '15 at 06:55
1

Hi sorry its my mistake. It capturing img tags but problem is its not capturing svg element images – Rahul_Dabhi Jun 12 '15 at 08:28
1

html2canvas.js does not support svg. see the FAQ in html2canvas official website. http://html2canvas.hertzen.com/faq.html Alternative solution is you can convert svg content to an image and capture. hope this way will work. – Karthikeyan Jun 12 '15 at 10:13
@Karthikeyan did you get solution for images which are hosted in other server? – Nikhil Radadiya Sep 01 '17 at 10:45
@NikhilRadadiya. Sorry I didn;t try to host in other servers. – Karthikeyan Sep 01 '17 at 11:23
@Karthikeyan so did you host it in same server? – Nikhil Radadiya Sep 01 '17 at 11:29
@NikhilRadadiya. Yes. – Karthikeyan Sep 04 '17 at 14:17
@Karthikeyan Anyways, I got the solution – Nikhil Radadiya Sep 04 '17 at 14:35

score 6 · Answer 2 · edited May 30 '23 at 03:53

6

You will need to add the following options in html2canvas.

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

edited May 30 '23 at 03:53

mehmet

506
3
12

answered Apr 06 '21 at 10:31

Utkarsh

537
9
16

score 3 · Answer 3 · edited Jun 28 '21 at 07:41

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:

see example

edited Jun 28 '21 at 07:41

Uwe Keim

39,551
56
175
291

answered Jun 27 '21 at 08:34

Sima Nongwe

67
3

Boris Gafurov · Answer 4 · 2021-12-17T18:57:12.107

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.

html2canvas not capturing image

4 Answers4

Linked