PHP Web Page Screenshot: Capture Web page screenshots using HTML2Canvas

Recommend this page to a friend!
  Info   Documentation   View files (9)   Download .zip   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
Not enough user ratingsTotal: 506 This week: 2All time: 5,721 This week: 110
Version License PHP version Categories
webpagescreenshot 1.0Freeware4HTML, Graphics, Utilities and Tools, A...
Collaborate with this project Author

webpagescreenshot - github.com

Description

This class can be used to capture Web page screenshots using HTML2Canvas.

It uses the jQuery plugin HTML2Canvas that converts a given page section to a graphic image on HTML5 canvas element and submits the captured image data to the server via AJAX.

The class takes the submit image data and decodes it before it saves the image to a PNG file in the screenshots directory.

The class also responds to the AJAX request with the URL of a link that can be used to download the saved image file.

Recommendations
Innovation Award
PHP Programming Innovation award nominee
April 2016
Number 2


Prize: PhpStorm IDE personal permanent license
Being able to capture screenshots of Web pages is an useful possibility because it may allow Web developers to see how a current page is looking for certain users.

This package uses a jQuery plugin to capture the the screenshot into a HTML5 canvas and then sends it to the server that decodes it and stores in a file for eventual analysis.

This way it provides a solution to capture page screenshots that does not depend on the browsers nor on external Web services.

Manuel Lemos
Picture of Bharat Parmar
  Performance   Level  
Name: Bharat Parmar <contact>
Classes: 11 packages by
Country: India India
Age: 29
All time rank: 58335 in India India
Week rank: 40 8 in India India
Innovation award
Innovation award
Nominee: 3x

Details

Webpage Screenshot

Take Screenshot of Webpage or Particular Div Content Download WebPage or Particular area of the webpage as Image using jquery and PHP

Developed By :

Bharat Parmar

Version :

1.0

File Structure :

1) example.php : Example Script file

2) saveimage.php : This file will save the HTML Content in PNG Image Format.

3) downloadimage.php : This file will ask user to download the generated image.

4) screenshot : This directory will store temp image files.

Requirements :

1) PHP Version : 3.0 and above

How It Works :

1) HTML to Canvas : Script will read the HTML code of the given print area.

2) HTML2Canvas Plugin : This plugin will generate Canvas content into the base64 data url of the image.

3) saveimage.php : Jquery send the Canvas Image Data URL to php file which will created new png image file.

4) downloadimag.php : PHP file will ask User to download the image.

How to use :

<button class='save-image' data-print-area='#print_div_2'>Capture Image1</button>

1) class : 'save-image' selectore will trigger the save image function.

2) attribute : 'data-print-area' will provide the printable area selector.

Advance Usage :

You can make your custom script to trigge the function as per you requirement. This script can be used to take screenshot of

the user on particular time interval.

  Files  
File Role Description
js (1 file, 1 directory)
screenshot (1 file)
downloadimage.php Aux. This file will ask user to download the generated image
example.php Data Example Script file
img1.jpg Icon Test image file
README.md Doc. Read me file
saveimage.php Class This file will save the HTML Content in PNG Image Format

  Files  /  js  
File Role Description
html2canvas (2 files)
   jquery.min.js Data Jquery file

  Files  /  js  /  html2canvas  
File Role Description
   html2canvas.js Data Jquery file
   jquery.plugin.html2canvas.js Data Jquery File

  Files  /  screenshot  
File Role Description
   20160406162106.png Output test image file

 Version Control Unique User Downloads Download Rankings  
 100%
Total:506
This week:2
All time:5,721
This week:110

For more information send a message to info at phpclasses dot org.