html2canvas- Take Screenshot of Web Page and Save It to Server (Javascript and PHP)

FeedBack is important. Usually, end-users struggle to clarify their problems. And you might be unreachable for a phone call or remote connection.

That causes a huge need of visualization. First solution that appears in mind is to capture the current screen of user.

However, when I tried to implement that, it wasn’t so easy as I expected. Some old ways offer ActiveX but it seems too outdated. Since there’s a bridge needed between client side and server, JS libraries are the best way.

There’s a great library, html2canvas. It is told to be reverse-engineered version of Google Plus’ way of taking screenshots.

When I first discovered this library, it took me a while to use for simplest implementation. I just wanted to visualize a div element. However, there was no single page to tell the whole path to follow, thus I had to combine various sources.

Here’s how you can easily use for taking a screenshot of a div:

1- Import libraries
There are 3 libraries to import:

jquery.js

html2canvas.js

jquery.plugin.html2canvas.js

You can download html2canvas and html2canvas jQuery plugin from this link.
Note: The source link contains html2canvas v0.40. I recommend you to check for a newer version and use it instead from official html2canvas site.

I have used jquery.min.js v1.7.1 but you can try other versions. For this jQuery library, use this link.
Here’s first lines of code:

3- Create a button and a hidden form
This part is important. In order to save the image to server, we need to pass captured image data with a form field.
In 4th step, you’ll see JavaScript code that writes the image data to hidden field and posts the form.

* This tutorial uses html2canvas v0.4.0 – 30.1.2013. It has a new release, v0.4.1 – 7.9.2013, can be downloaded from here. Though avaliability of newer versions haven’t been tested with the code above.

* Some people have declared that they had issues with checkbox/radiobutton states on the captured image. Stu has shared his code to capture these elements with their states. I haven’t tried by myself but people who face problem about this may get some opinion from his comment.

Glad you could use it for your own purpose. I wish I could answer your question too but it might need a little bit more of research.

Trying it with frames is a good idea, however, think of it from this way: When you use a frame, you actually connect to a remote server. What you have in your server is a blank frame so, html2canvas gives you exactly this.

But good news is that we know it is possible with html2canvas, we just don’t know how. Please check the official test page, there you can see that you can give the URL and get the screenshot:http://html2canvas.hertzen.com/screenshots.html

So I believe that what you want can be found in official examples and after you figure out how, you can use my code to save to the web server.

Regards,

sudip

you are right I am rtying to capture some image after loading a iframe, but it not working !!

http://www.kubilayerdogan.net/ Kubilay

Hi,

Do NOT even try iframe, I have explained in the comment above, it is server-side, there’s no meaning in it.

hello,
before using it on my website, i wanted to try the method so i installed your demo on my website but it doesn’t seem to work…http://astridetvalerian.be/TEST/
the image link is missing so i suppose it doesn’t save the image… i setted the CHMOD attributes of the folder on my server to 777, but it still doesn’t save the image…
can you maybe help me?
thaks in advance!

If there’s an error about file permissions or anything else, it should be seen. If there isn’t any, there might be something goes wrong while the page is posting form values(index.php) or reading them(save.php).

If you are using these files, I’m sure it’s something about the PHP .ini file configuration. Search Google for PHP POST issues.

Kind regards.

http://nickdh.cwahi.net NickDH

Hello Kubilay!
Seems like a really good script. I’d love to use it, but I seem to be having some troubles.
My web server supports PHP, but every time I try using this script (installed like explained) the PHP code on the next page pops up, and doesn’t seem to work.
If you’d like an image of what I’m trying to explain,http://i.imgur.com/zwPs1xz.png
Hope you can help. Thanks!

http://www.kubilayerdogan.net/ Kubilay

Hi Nick,

Thanks for the explanation with image.

Don’t get me wrong, but did you make sure that you have included < ?php and ?> opening-closing tags? Seems like the php code is not being executed.

So either you have problem with your server’s PHP configuration, or you have a problem with your PHP file. Try to use your code somewhere else (like free web hostings) and see if you have any trouble with them.

Hope this helps,
Kubilay

http://www.belatel.com Dimanche

Hi Kubilay,

It could not capture the HTML’s radio and checkbox element that are selected.

Button and Textbox works. Any solution to solve this?

Thanks for your effort.

Regards,
Dimanche

http://www.kubilayerdogan.net/ Kubilay

Hi Dimanche,

If the script captures a checkbox as unchecked even though it was checked, that seems to be a real problem.

I don’t have a straight solution but I think you may want to make sure that your checkbox status is being posted, if not then there’s something that removes the checkbox status; if it is being posted, then I guess it’s something about html2canvas’ abilities. You should try to contact with the developer, too.

Hope you can work it out.
Kind regards,
Kubilay

Jade

Hey Kubilay,

Fantastic code!
I would like to know if this is possible without the server -side saving? If I removed the PHP, could I just simply open the saved image in a new tab once the ‘Save’ button is pressed?

Also, I have not tested your code, but could the radio and checkbox problem be removed if jQuery UI was used instead of the basic HTML form elements?

Thanks,
Jade

http://www.kubilayerdogan.net/ Kubilay

Hi Jade,

Thank you. I think you can use the same PHP script with $_GET values instead of $_POST while you send the img_val field’s value with query. jQuery’s ajax() function may be able to do that.

I haven’t tried anything with radio and checkboxes but perhaps your suggestion would work. If I can try it in some proper time, I’ll update the original post in case it works.

Thanks again, cheers.

Jade

Hey Kubilay,

Thanks for your response.

I have heard from many people that the HTML2Canvas library lacks saving the selected radio buttons and checkbox’s. There must be a solution to this, and I think that maybe using jQuery UI might be the solution since it creates its own HTML form elements instead of re-styling the default HTML form elements.

I can try and give it a shot and post back here, but I’m flat out with work. Would be fantastic if someone could find a solution to this as it is an ongoing problem.

Thanks,
Jade

http://www.kubilayerdogan.net/ Kubilay

Hi again Jade,

You are right. Though it might depends on the page JS events cycle, as long as the jQuery UI events happen before the html2canvas, I think UI might prove your opinion right.

So it’s definitely worth trying. Let’s hope that people who need solution about this read your comment and tries, even give us a feedback.

Cheers,
Kubilay

eerriicc46

HI Dimanche… i had the same results untill i try it on others browsers than internet explorer (10 for me).

It looks to me that the part causes the error isn’t relevant to the code I have shared, it might be somewhere else in your code. I can’t tell what’s the problem exactly since I haven’t seen your code but I think you are trying to reach an object that doesn’t exist or can be reached by using different methods.

All you need to make this work is the above code are image files of checked and unchecked: checkbox and radio.

The way I did it was to simply take screenshots of the existing checkbox and radio both checked and unchecked and use those. That way the size is perfect and they look like the original.

Cheers! :D

http://www.kubilayerdogan.net/ Kubilay

Hi Stu,

I haven’t tried myself but it seems like a proper way. I have shared your comment’s link in the original post so that people can notice easier.

Thank you for your contribution.

Kind regards,
Kubilay

http://n/a SpencerB

Thanks a lot for the amazing and time saving tutorial. This is the missing bit to the originators of the html2canvas code. They did an amazing job but their documentation lacks exactly what you have in this post. I think it would be brilliant if you could contact them and request them to let you write this article on their site. I believe this article would add 200% more value to what they have. Just saying. gain, thank you.

http://www.kubilayerdogan.net/ Kubilay

Hi SpencerB,

Thank you for your advice, I will consider it.

I agree with you about the documentation as I mentioned in the tutorial that how it was tough for me to implement it basically. I’m glad that it helped you, you are welcome.

Regards,
Kubilay

Yannick

Thanks for this tutorial it really did saved me a lot of work.

If the image in the webpage are hosted on a different server they won’t be added to the screenshot … Any solution for that.

for ex:

(works)
but not

http://www.kubilayerdogan.net/ Kubilay

Hi,

You are welcome.

Well, I think it’s an expected result. Perhaps you can save the image to your server before you take the screenshot.

Hi, thanks for tutorial, i tried your tutorial. i got one problem. i have div with css background image. after i convert that div into img i got only the text. i didt get css background image. what will be the problem????

http://www.kubilayerdogan.net/ Kubilay

I suggest you to check two things:
1- Your internet browser. It might be outdated or not supporting some canvas abilities.
2- Image path. If it’s not on your server and you are using its absolute URL, it might be a problem. You can see previous comments that remote content can cause problems sometimes. So save the image to your server and give a relative path like url(../images/background.png).

Hope this helps. Regards.

http://- Sajitha

Nice article dude. I was searching for this. Thanks

gbec78

hey Kubilay great work! any chance you can tell me though how to convert the code on the save.php page to save this to my SQL Database instead of my server? I want an actual newimage.png file that i can save on my sql server, then create a link to that image and save the url in a table…

When you save the image with the code I shared, (Line: file_put_contents(‘img.png’, $unencodedData);), there’s an actual image on the server named “img.png”.

All you have to do is move it to wherever you want with move_uploaded_file() function like this:
move_uploaded_file(‘img.png’, ‘../mywebsite/images/$newname’);

Then save the new path (‘../mywebsite/images/$newname’) in your database so you can access it later.

Hope this helps,
Kind regards.

plm

Hi, please could You help me? How can I do this: “Then save the new path (‘../mywebsite/images/$newname’) in your database so you can access it later.” I dont understand, what should I do? Where to put it? And how? Thanks!

plm

Hi, please could You help me? How can I do this: “Then save the new path (‘../mywebsite/images/$newname’) in your database so you can access it later.” I dont understand, what should I do? Where to put it? And how? Thanks!

Juan Manuel Ortega

Please help me,
I want load the image into the same index.php, but in other div.
How can I do?

http://www.kubilayerdogan.net/ Kubilay

Hi,

Then you don’t need step 5, the PHP file.

Also, don’t submit the form as it was told in the step 4.

In the div you want to show the image, create an image with an id like “targetImg”.

Then in step 4, replace the code:
$(‘#img_val’).val(canvas.toDataURL(“image/png”));
To this:
$(‘#targetImg’).attr(‘src’, canvas.toDataURL(“image/png”));

That should work for you.

You see, normally we load the image data to a hidden field named img_val so we can post it with the form and read it on the server side (5th step). Thus we can actually create a physical image file. But if you don’t need that, things are easier for you.

I’m not sure if $(‘#targetImg’).attr() will work, but you need to set some property of $(‘#targetImg’), if it’s not attr(‘src’), it could be $(‘#targetImg’).val(canvas.toDataURL(“image/png”)). If still not working, search about showing an image with javascript using base64 value.

Regards.

Luca

I wish I had save.php pages in ASP?
You could send her?
Sorry for the english but translate by google.

hi,
i include div’s from jquery.i used this function yhat nothing captured.and also the image.
please help me

abiraman

it captured text but not captured image
please help me
thank u

http://www.kubilayerdogan.net/ Kubilay

Hi,

I think this problem occurs when the image is loaded from an external URL. Please check this situation.

Regards,
Kubilay

abiraman

hi, thanks for your solution.i load my image from external url. what i do for this.my images are in my server.

please help me…

thank u….

abiraman

i convert my images in to my localhost.it takes screen shot.but not get full image.its only get(513×490)

please help me

abiraman

hi, i tried to capture screen short in firefox(version 22.0).its work perfectly.but chrome(version Version 31.0.1650.63)not works.

please reply me quickly…

http://www.kubilayerdogan.net/ Kubilay

Hi,

Like I said at the end of the tutorial, I have used previous version of html2canvas. You should try out the latest release and official examples if the code above doesn’t work.

Regards,
Kubilay

http://gumireddy.in prashanth

hey bro thanks a lot everything works perfectly :)

how can i do this tweak?
im working on my wordpress site in which i want a the content of a post to be converted to image..when i capture a post it saves it to the server has “img.png”… but when i click capture again on a different post it replaces the previous image “img.png”. can i save these images with different names? like post names maybe?

http://www.kubilayerdogan.net/ Kubilay

Hi,

Of course you can. For example, you can use the ticks concept which means the seconds count from the first date.

strtotime() function returns a different number per second. So your image names will be different each time.

If you want a custom file name like article names, you have more work to do. You can post the desired file name with the HTML form (E.g. place an input in the form created on step 3). In server side, what you need to change is step 5.

Hope this helps,
Regards.

http://gumireddy.in prashanth

you are awesome bro.. thanks a lot :)

http://gumireddy.in prashanthbr

Hi bro.. i used strtotime() functions is works good. but its kinda akward to look into the image each time to see what data it has, can you please tell how to rename it with article name?
i tried this

<input type="hidden" name="” id=”img_val” value=”” />

but im sorry im not good with code.. your help is greatly appreciated. thank you

http://www.kubilayerdogan.net/ Kubilay

Hi,

If you put a “hidden” field, you cannot set its value. Try to put a text field like:
input type=”text” name=”fileName” value=”” />

Then you will see a text input. Whatever you type in here will be posted to server side in $_POST[“fileName”] variable.

So in step 5, while setting the file name, use this value like:
file_put_contents($_POST[“fileName”].’.png’, $unencodedData);

Hope this helps,
Regards.

http://gumireddy.in prashanth

Worked perfectly :) thanks

Rock Bond

I can not find this file.please help me.In which file i have to replace this code

Is there any way that I can set this up to open save.php in fixed size popup window? I have tried everything I can think of to get this to work!

Manohar

In my application i have to take a screenshot of div containing two images overlapped each other. I tried to use the htmlcanvas , but i am getting only one image instead of two images, can you please give some suggestion so that my problem get solved. Thanks in advance.

http://www.kubilayerdogan.net/ Kubilay

Hi,

AFAIK, html2canvas doesn’t support all the CSS features so that might be something that it’s not be able to process. I recommend asking this to the official sources, though.

Kind regards,
Kubilay

Rajesh

Hi Kubilay..I can not print high chart svgs from my webpage. Here is an example.
Created with Highcharts 3.0.10-modifiedEarned Media ValueEarned Media Value01230100200300400500600

Please let me know if it is possible.

z3n

Hi, can you’re plugin be freely used ? Thank you.

Anony Mouse

Worked like a charm.

Thanks to you I completed my work without diving deep into php.

Jenson

If there is a flash player in div id=”target” and a video is playing, does html2canvas still work?
Just like this:
div id=”target”>
object type=”application/x-shockwave-flash” data=”http://static.youku.com/v1.0.0441/v/swf/player_yknpsv.swf” width=”100%” height=”100%” id=”movie_player”> /object>
/div>

http://www.kubilayerdogan.net/ Kubilay

Hi,

I haven’t tried but probably not. Just like it doesn’t work for iframes etc.

It’d be great if you share the results in case you test though.

Kind regards.

Manos

Hello Kubilay,

the plugin works really nice and well done.

I have a question.

What if you want to screenshot multiple images?

Lets say I want to screen all the divs with a class and store them into a directory?

Is there a solution to this?

Thank you in advance.

http://www.kubilayerdogan.net/ Kubilay

Hi,

How about storing different divs’ canvas.toDataURL values to different inputs? (step 4, line: 5)

OR, if you want to use a certain class, you should use class selector with jQuery and .each() method to store their canvas.toDataURL values into inputs.

Then submit the form and use these $_POST values to save however you want.

Kind regards,
Kubilay

radeep

How to display checkbox and Radiobuttons with html2canvas?

http://www.kubilayerdogan.net/ Kubilay

Please read the end of the tutorial.

Radeep

I tried that code and it is not working. will you able to help me as it is quite urgent.

NB:Regarding How to display checkbox and Radiobuttons with html2canvas?

hi you can php code to take the screesnhot of the window, is so easy i found the code in php site

it’s something link windowspan() function

Radim

First of all thanks for this article, you saved me from having more grey hair. :)

I have a page with a form which displays kind of consent. User has to:
– tick a checkbox “agree”
– and click on a submit button.
After these two steps I get 0 sized png file written on server, which is the problem I try to solve.

BUT user also has option to upload a file (input type=”file” in form). User first selects file from localhost and then performs same two steps as above, but in this case screenshot is saved on server, no issues here. :)

Any suggestion what might be the problem in first scenario? I tried to re-render page, resize window, no sucess so far… Tested in Chrome and Firefox, both behave same way…

Shrestha

How to save multiple images from html

rabesh

How to save different image from diffrent dynamic HTML using html to canvas

Dmitry Web

Great!
but what about svg rendering on the page?
it didn’t saved…

ComprarnoEbay

How can we use this to take remote screenshots? index.php?url=http://google.com ?

html2canvas is loaded but I keep getting “$(…).html2canvas is not a function”
I tried on a div and on page body

Lilis Skyremix

I used html2canvas($('#...') to initialize it.

Jens

Is there any posibillity to save a screenshot without using a form? I want my website regularly to produce automaticly screenshots in the background (as image for posting the site on facebook). So the user should recognize that happened something like that.

http://kubilayerdogan.net kubilay e.

You can use jQuery’s ajax() method to post a form using Javascript so the page won’t get reloaded.

Keshav Naidu

Hi Kubilay, Please Help me with using Ajax on this. I am getting problem.
I don’t knowledge on Ajax
-Thank you so much.

thanks a billion. I’ve spent several days trying to get this exact thing done. I’m a newbie so I totally didn’t know that I needed to decode the string.

http://kubilayerdogan.net kubilay e.

Sam,

You’re welcome. I’m glad that it has helped your way out.

Brian Macklin

Getting this error:
Warning: file_put_contents(img.png) [function.file-put-contents]: failed to open stream: Permission denied in D:Hosting2209635htmlimagessave.php on line 7

Brian Macklin

Where does it save it to? What file? I don’t find anything on my server.

Gabriel Glauber

tanks man! works fine for me!

Bhadresh Pipaliya

background image not working using this code

John

Hi seriously great guide! But I have a problem everything is working at home with uwamp server but it doesnt work when I host it on linux any idea why? I’m making banner creator so I’m stacking div on div and when I take screenshot on linux debian server it just saves blank pics..

http://www.sreemon.com/ Satyajit

You can use snapwb.com also. they are providing free 1000 screenshot every month and there api is very user friendly

Hi,
Is it possible to capture one page from another page.
Only thing is capturing page means, opened page in another tab.

Can anyone help me to solve this issue.

Thanks
Gopalakrishnan

Fodil

Thanks a lot. It worked perfectly

http://kubilayerdogan.net kubilay e.

Happy to hear that it helped you.

Rahul

Hey guys, Nice library.
But I am not able to capture the screenshot of content inside iframe.

Anil

canvas is not support for iframe

Dilip

I have a very huge form which client wants to export to PDF. So what i did is: When client filled up the form on screen and click on ‘Export to PDF’ button, I just used your solution to generate PNG and same PNG i have integrated into PDF and save PDF. Great result! Mant thanks! Thought the values in text box are not in center, it slightly moves towards to bottom line of text box, i faced same issue with your demo as well. Any thoughts on this?
Overall best solution! I saved my number of days!
Thanks

govind

Hie there , It worked on localhost . But when i moved to my domain nothing works,in console it says html2canvas is not a function ??? why this kind of error . Can anyone help here to get rid of this….