PHP Classes
elePHPant
Icontem

PHP Web Page Screenshot: Capture Web page screenshots using HTML2Canvas

Recommend this page to a friend!
  Info   View files Documentation   View files View files (9)   DownloadInstall with Composer Download .zip   Reputation   Support forum   Blog    
Last Updated Ratings Unique User Downloads Download Rankings
2016-04-19 (3 years ago) RSS 2.0 feedNot enough user ratingsTotal: 472 This week: 2All time: 5,885 This week: 146Up
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
  Performance   Level  
Name: Bharat Parmar <contact>
Classes: 11 packages by
Country: India India
Age: 28
All time rank: 62936 in India India
Week rank: 46 Up11 in India India Up
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 folder image Files  
File Role Description
Files folder imagejs (1 file, 1 directory)
Files folder imagescreenshot (1 file)
Accessible without login Plain text file downloadimage.php Aux. This file will ask user to download the generated image
Accessible without login Plain text file example.php Data Example Script file
Accessible without login Image file img1.jpg Icon Test image file
Accessible without login Plain text file README.md Doc. Read me file
Plain text file saveimage.php Class This file will save the HTML Content in PNG Image Format

  Files folder image Files  /  js  
File Role Description
Files folder imagehtml2canvas (2 files)
  Accessible without login Plain text file jquery.min.js Data Jquery file

  Files folder image Files  /  js  /  html2canvas  
File Role Description
  Accessible without login Plain text file html2canvas.js Data Jquery file
  Accessible without login Plain text file jquery.plugin.html2canvas.js Data Jquery File

  Files folder image Files  /  screenshot  
File Role Description
  Accessible without login Image file 20160406162106.png Output test image file

 Version Control Unique User Downloads Download Rankings  
 100%
Total:472
This week:2
All time:5,885
This week:146Up