Take screenshot of webpage with Html2Canvas

Last updated on March 4, 2023 by Yogesh Singh

Html2Canvas is a JavaScript library that allows you to take a screenshot of the entire web page or a specific section with just a few lines of code.

It returns an HTML5 canvas element when it is initialized on the element that you can use to create a new image file or display a screenshot preview on the screen.

In this tutorial, I show how you can use Html2Canvas library to take a screenshot and save it to the server using PHP.

Download

Download and Include
Initialize
Example 1 – Full page screenshot
Example 2 – Screenshot of specific area
Example 3 – Save screenshot to the server
Conclusion

1. Download and Include

Download the library from GitHub.
Include html2canvas.js script at the <head>.

<script type="text/javascript" src="html2canvas-master/dist/html2canvas.js"></script>

2. Initialize

Call html2canvas() method which takes selector as a parameter and with then handle canvas response.

html2canvas(document.body).then(function(canvas) {
   document.body.appendChild(canvas);
});

canvas.toDataURL()

This method returns the base64 value which you can use to create an image source or an image file.

html2canvas(document.getElementById('container')).then(function(canvas) {
   document.getElementById("image").src= canvas.toDataURL();
});

3. Example 1 – Full page screenshot

Take a screenshot of the full page and show a preview.

Completed Code

<!doctype html>
<html>
  <head>
     <script type="text/javascript" src="html2canvas-master/dist/html2canvas.js"></script>
  </head>
  <body>
     <h1>Take screenshot of webpage with html2canvas</h1>
     <div class="container" id='container' >
          <img src='images/image1.jpg' width='100' height='100'>
          <img src='images/image2.jpg' width='100' height='100'>
          <img src='images/image3.jpg' width='100' height='100'>
     </div>
     <input type='button' id='but_screenshot' value='Take screenshot' onclick='screenshot();'><br/>

     <!-- Script -->
     <script type='text/javascript'>
     function screenshot(){
         html2canvas(document.body).then(function(canvas) {
              document.body.appendChild(canvas);
         });
     }
     </script>

  </body>
</html>

View Demo

4. Example 2 – Screenshot of specific area

In this example, I am taking a screenshot of <div id='container'> content.

Completed Code

<!doctype html>
<html>
   <head>
      <script type="text/javascript" src="html2canvas-master/dist/html2canvas.js"></script>
   </head>
   <body>
      <h1>Take screenshot of webpage with html2canvas</h1>
      <div class="container" id='container' >
         <img src='images/image1.jpg' width='100' height='100'>
         <img src='images/image2.jpg' width='100' height='100'>
         <img src='images/image3.jpg' width='100' height='100'>
      </div>
      <input type='button' id='but_screenshot' value='Take screenshot' onclick='screenshot();'><br/>

      <!-- Script -->
      <script type='text/javascript'>
      function screenshot(){
         html2canvas(document.getElementById('container')).then(function(canvas) {
            document.body.appendChild(canvas);
         });
      }
      </script>

   </body>
</html>

View Demo

5. Example 3 – Save screenshot to the server

HTML –

Create a similar HTML layout as the above example and include the jQuery library.

Script –

Create screenshot() function where initialize html2canvas on the body. By default, html2canvas set the image background color to black if save the screenshot.

With the use of background: '#fff' set background white. Read the screenshot image base64 URL using canvas.toDataURL().

To save image to the server send AJAX POST request to ajaxfile.php where pass base64URL variable as data.

Completed Code

<!doctype html>
<html>
  <head>
    <script type="text/javascript" src="html2canvas-master/dist/html2canvas.js"></script>
  </head>
  <body>
     <h1>Take screenshot of webpage with html2canvas</h1>
     <div class="container" id='container' >
        <img src='images/image1.jpg' width='100' height='100'>
        <img src='images/image2.jpg' width='100' height='100'>
        <img src='images/image3.jpg' width='100' height='100'>
     </div><br/>
     <input type='button' id='but_screenshot' value='Take screenshot' onclick='screenshot();'><br/>
    
     <!-- Script -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

     <script type='text/javascript'>
     function screenshot(){
          html2canvas(document.body,{background: '#fff'}).then(function(canvas) {

               document.body.appendChild(canvas);

               // Get base64URL
               var base64URL = canvas.toDataURL('image/jpeg').replace('image/jpeg', 'image/octet-stream');

               // AJAX request
               $.ajax({
                    url: 'ajaxfile.php',
                    type: 'post',
                    data: {image: base64URL},
                    success: function(data){
                         console.log('Upload successfully');
                    }
               });
          });  
     }
     </script>
  </body>
</html>

AJAX file –

Create ajaxfile.php file and upload folder to store the screenshot taken using Html2canvas.

Read $_POST['image'] value and specify upload path in $location. Explode $image by ";base64," and decode base64 value using base64_decode().

Create a unique filename and pass the filename and base64 value to file_put_contets() to store file on the server.

Completed Code

<?php 
$image = $_POST['image'];

$location = "upload/";

$image_parts = explode(";base64,", $image);

$image_base64 = base64_decode($image_parts[1]);

$filename = "screenshot_".uniqid().'.png';

$file = $location . $filename;

file_put_contents($file, $image_base64);

6. Conclusion

Html2Canvas is a highly versatile and efficient JavaScript library that allows you to take high-quality screenshots of any webpage with ease on the client browser without server-side interaction.

It might not able to generate the proper view if there is complex CSS applied to the elements.

Browser compatibility –

Firefox 3.5+
Google Chrome
Opera 12+
IE9+
Safari 6+

If you found this tutorial helpful then don't forget to share.

92 thoughts on “Take screenshot of webpage with Html2Canvas”

Rishu Gupta

May 14, 2018 at 7:32 am

This example is really good.
One quick requirement, Instead of appending to body. Is it possible to download from browser as image.
Reply
Pat

August 10, 2018 at 4:22 am

hi!, how can I take the screenshot of a div?
thanks in advance.
Reply
mounika

August 20, 2018 at 4:57 pm

How can we preview it on the same page?
Reply
Ali

September 11, 2018 at 3:41 am

How about saving the screenshot image from the second example on the server?
Reply
michy amrane

November 30, 2018 at 9:28 pm

can you please made an example on how to display the screenshot in a modal?
and how can we display multiple screenshots on a carousal ?
#bootstrap
Reply
jomar

January 17, 2019 at 8:41 pm

i used this in my materialize css form, the screen shot in form is not good, maybe because of materialize css, and the rest is good

function saveCanvas(id){
html2canvas(document.getElementById(id)).then(canvas => {
var imageData = canvas.toDataURL(‘image/jpeg’);
var url = ‘my-api-url/images’;
/* save image to server */
$.ajax({
url: url,
type: ‘POST’,
dataType: ‘text’,
data: { myparams: imageData},
success: function(response){
console.log(response)
}
})
})
}
Reply
reklam80

January 24, 2019 at 1:27 pm

The codes are working in the browser, but the server is not receiving any requests with cron. codes do not work.
Reply
Mahesh

February 6, 2019 at 11:38 am

This example is really good.
One quick requirement, Instead of appending to body. Is it possible to show in popup?
Reply
Muhidin

February 15, 2019 at 5:39 pm

First of all, thank you Yogesh for the article. I am building an intranet for my organization and had faced a challenge on how to export a div element that displays the employee payslip details with the css styles intact. I tried server side PDF generation techniques but the styling was ugly, damn ugly. I then stumbled upon your blog and it helped me immensely. I ended up converting the div content to a png image and then downloaded it as pdf file
Reply
Anas Reza

March 15, 2019 at 8:47 am

Hi Yogesh,

I am done with the save screenshot step which is downloading an image to download folder. But how can I save the SS to a specific path of in my local directory.
Reply
Jace Clark

April 11, 2019 at 10:32 pm

Hello,

This is great stuff and it worked but unfortunately it’s not getting the iframe part when the page got an iframe in it. What’s the workaround for this? Thanks.
Reply
Man

April 22, 2019 at 6:37 am

Hello, thanks for the topic.
Is it possible to take screenshot of iframe?
Canvas don’t wan’t to take it
Reply
sunprince

May 28, 2019 at 12:33 am

Can you help me!. How to change the image size in javascript, please!!
Reply
Silas Aragozo

June 7, 2019 at 3:00 pm

Using example 3, it would be possible to show the image URL (localhost / upload / name_image.png), you just need to show the URL on the image screen that the user just created! Any help would be greatly appreciated! Thank you!
Reply
claudio

June 10, 2019 at 4:49 pm

hi, can you give me complete ajaxfile.php example, please? i’m not able to make upload function working alone… thanks 😉
Reply
zahra

July 9, 2019 at 6:54 am

thank u. thank u.thank u.
Reply
kumar

July 24, 2019 at 4:07 pm

is it possible to screenshot image display in popup modal ?
Reply
Paul J

July 29, 2019 at 7:39 pm

Thanks very much for this. Works really well for me.
Saving the file to the server but I had to modify the php file so it saved as jpg, not png as irfanview said it was not a png file but jpg.
I have a couple of things I need to do.
1. I do not wish to see preview. How do I hide this?
2. How do I get file name to be the value in drop down list?
Thanks again. Love it.
Reply
Paul J

July 31, 2019 at 5:56 am

I have now resolved this. I had to update the screenshot function to include the following line (where datepicker is the ID from the text input box):
var val1 = $(‘#datepicker’).val();

Then update the ajax data code to the following:
data: {image: base64URL, datepicker: val1},

Finally I had to update the filename code in the php to:
$filename = $_POST[‘datepicker’].’.jpg’;
Reply
Arun

July 31, 2019 at 6:01 am

HIi,
I commented in this forum. But somehow could not see in the above list.
Is it possible to take screenshot of dynamically generated Chart or content using html2canvas because i am not getting desired result.
I am using reactjs and recharts for generating charts from content received via axios from server.

-Arun
Reply
- B
  
  February 18, 2020 at 7:01 pm
  
  any luck on downloading charts?
  Reply
Drashti

August 6, 2019 at 3:50 pm

Hello,
I’am trying to integrate this with angular. Can you provide your insights on that and also how can I make so that the captured image takes up entire screen and then I can perform operations on it like putting markers on it. It will be great help!!
Thanks in advance.
Reply
kumar

October 4, 2019 at 7:18 am

is there any option to take screenshot of alert box?
Reply
Vikas

November 7, 2019 at 2:12 pm

Can we take chart/graph screenshot?
Reply
Red

December 18, 2019 at 1:42 pm

Hi yogesh,
thank-you for your wonderful article. I want a screen-shot of an html-element having a good amount of css implemented. like css from this site – https://marvelapp.github.io/devices.css/. I am not able to take screenshot from an node with this level of css used.
Can you suggest anything.
Reply
Patrick

January 15, 2020 at 8:11 am

Could someone please show a working example of return of $filename I can not seem to get it to work … it displays image but i need a URL of image that has been uploaded.
Reply
Martin

February 9, 2020 at 8:33 am

Hi
Thanks for the cool stuff. I did everything according to example 3 and everything works, but the saved image on the server always has a black background. Preview of the saved DIV is fine, even as it saves the DIV preview to disk via the right mouse button (save image as), everything is also ok. Some hint what may be wrong
Reply
Turner Bell

February 17, 2020 at 7:26 am

Good day!
I went through your blog right now and I am amazed really! You have elaborated your article greatly with precise code and content.

I have implemented this tutorial and it really works. Thanks Yogesh!
Reply
Lance

February 28, 2020 at 6:42 am

Hi, thanks for the code. I like the ajax way of doing this much better! I had an older html2canvas script that was saving a single image.

Now, I’m saving an image and using the date and current time as the image name. I want to email this image every time it gets saved. My old script no longer works. Wondering if you’ve done this before?

Basically — save image then send last saved image to “x” email.

Thanks!
Reply
FEi

March 2, 2020 at 3:05 pm

Hi, thanks for the code. Just want to check is any way to open the saved image in a new window/tab? Thanks again!
Reply
- FEi
  
  March 2, 2020 at 3:13 pm
  
  Sorry, the question is for example 3. And is it posable to open a new HTML page with the saved image? Thank you!
  Reply
Daniel

March 7, 2020 at 4:38 pm

Hello and thank you for the article. I wanted to ask you if instead of showing the image or saving it to the server can Isend it by e-mail among other fields that the user enters?

Thank you so much!
Reply
Deepraj

March 20, 2020 at 7:38 am

Using HTML2Canvas i cannot generate base64 url for the modal. Can anyone suggest me the idea of how can i do it?
Reply
kiran ganta

March 31, 2020 at 11:19 am

It is working all defined browser but my case it is not woring in IE any version of browsers can you give me suggestion for the same
Reply
arun

April 2, 2020 at 12:09 pm

This example is really good.
Q1: I have targeted a container and downloaded the image. The image looks blurry. Unable to read the content. Is there any way to download it in high resolution.

Q2: In landscape mode, the visible part of the container is downloaded instead of full. Is there any solution to this.

Used code:
function capture(){
html2canvas(document.getElementById(‘profileBox’)).then(function(canvas) {

document.body.appendChild(canvas);
var a = document.createElement(‘a’);
a.href = canvas.toDataURL(“image/jpeg”).replace(“image/jpeg”, “image/octet-stream”);
a.download = ‘SnackSelfie.jpg’;
a.click();
});
}
Reply
Muneeb Khan

April 16, 2020 at 6:26 am

I wanna take a snapshot of div with the full height now it’s only taking the SS as much size is visible in the screen. any solution?
Reply
- Muneeb Khan
  
  April 16, 2020 at 6:40 am
  
  here’s my code..
  
  html2canvas(input)
  .then((canvas) => {
  const imgData = canvas.toDataURL(‘image/png’).replace(‘image/jpeg’, ‘image/octet-stream’);
  const pdf = new jsPDF();
  pdf.addImage(imgData, ‘PNG’, 0, 0);
  pdf.save(‘download.pdf’);
  });
  Reply
Muneeb Khan

April 16, 2020 at 6:40 am

here’s my code..

html2canvas(input)
.then((canvas) => {
const imgData = canvas.toDataURL(‘image/png’).replace(‘image/jpeg’, ‘image/octet-stream’);
const pdf = new jsPDF();
pdf.addImage(imgData, ‘PNG’, 0, 0);
pdf.save(‘download.pdf’);
});
Reply
julian

April 22, 2020 at 3:32 am

Hello! thanks for answering:

I have a web page (my site.html) and I want to generate a web page (my site screenshot.html) where I take a screen from the first web page.
should i use getsceen and an iframeload?
thanks!
Reply
Tushar

April 29, 2020 at 12:38 pm

Hi,
I Got following error.
Failed to load resource: the server responded with a status of 404 (Not Found)
Reply
mukul

April 30, 2020 at 6:09 pm

var img = canvas.toDataURL(“image/jpeg”);
This some times returns incomplete data, captured image returned is incomplete.
Is there a way that we can check if the image is complete?
NEED: I want to send that variable img to another function in same java script file which further sends that image over email.
PROBLEM: it returns incomplete data many of the times, that the screenshot is incomplete, or we can say that empty screenshot or blank screenshot
Reply
Archana

May 20, 2020 at 11:41 am

Hi Yogesh,

Thanks for the article.
I want to take snapshot of a page which contains data and a scrollable table. The snapshot should have all the data of page including data from the scrollable table.
Reply
- vishal
  
  May 27, 2020 at 10:48 am
  
  function capture(){
  window.scrollTo(0, 0);
  html2canvas(document.getElementById(‘container’),{ height: document.getElementById(‘container’).scrollHeight}).then(function(canvas) {
  // Get base64URL
  var base64URL = canvas.toDataURL(‘image/jpeg’).replace(‘image/jpeg’, ‘image/octet-stream’);
  
  // AJAX request
  $.ajax({
  url: ‘test.php’,
  type: ‘post’,
  data: {image: base64URL},
  success: function(data){
  console.log(‘message);
  }
  });
  });
  }
  
  You can calculate the scroll height and add use it with heigh property. May this will help you
  Reply
Vineet

May 21, 2020 at 6:35 pm

Hey, Yogesh I downloaded the same example that you are describing but it does not take a screenshot of the image can you please help me in this?

Thanks in Advance
Reply
bhasker

June 5, 2020 at 10:23 am

I am getting an blank canvas instead of image any soln?
Reply
Ryan Ye

June 12, 2020 at 11:27 pm

Hi ~ thanks for giving such wonderful tutorial, it’s really understandable! I just wonder can I apply this technique to another site which not owned by myself. Take screenshot from anysite I want…is it possible….? thanks for teaching …:)
Reply
Sachin Satish

June 17, 2020 at 7:49 pm

Hi Yogesh,
Thanks for the example, currently I am facing a problem in html2canvas I am using html2canvas screenshot for dynamic data. It works fine for first iteration andfrom second iteration I am getting blank screen

Can you help me please
Reply
Anurag Mishra

July 27, 2020 at 11:44 am

How do we use in chrome extension. It gives error that html2canvas not defined.
Reply
Shubham Garg

November 3, 2020 at 2:10 pm

Hi Yogesh,
you are doing an amazing work making the code and documentation part easy for otherr to understand. How can i download the same screenshot in my local on click.
Reply
Padmanabhan

November 9, 2020 at 3:02 am

Was searching for a week. This one is the simplest solution I could find. how can we do this instead of specifying div, giving certain screen co-ordinates?
Reply
Purvesh

January 6, 2021 at 3:05 pm

But How can i save that screenshot in my local machine automatically?
Reply
Ameenulla

August 25, 2021 at 5:51 am

google maps not loading in screenshot blank page coming for map

html2canvas(document.body).then(function(canvas) {
document.body.appendChild(canvas);

});
Reply