Javascript Course

The JavaScript script presented in this page can be used to take Screenshot of web page (or a specified html element) and Save it to Server with PHP.
It uses html2canvas to get the screenshoot in JavaScript, and Ajax to send base64 screenshoot data to a PHP script that saves the screenshoot in a PNG image file on server.

- Demo save page screenshoot

- Download Script - Save page screenshoot (92 KB)
Or:

1. Get html2canvas.js from: html2canvas and save it in a JS file on your server (for example in "html2canvas.js").

2. Copy the following code and save it in a php file on your server, called save_screenshoot.php:
<?php
define('UPLOAD_DIR', 'screenshoot/'); //folder to save screenshoot

//get properly base64 image data passed via post in 'cnvimg'
$cnvimg = trim(strip_tags($_POST['cnvimg']));
$cnvimg = str_replace(['data:image/png;base64,', ' '], ['', '+'], $cnvimg);

//set image name from 'imgname', or unique name set with uniqid()
$imgname = (isset($_POST['imgname']) && !empty(trim($_POST['imgname']))) ? trim(strip_tags($_POST['imgname'])) : uniqid();

//get image data from base64 and save it on server
$data = base64_decode($cnvimg);
$file = UPLOAD_DIR . $imgname .'.png'; 
$save = file_put_contents($file, $data);

//set and output response
$resp = $save ?['re'=>$file] :['er'=>'Unable to save: '. $file];
echo json_encode($resp);

3. Copy the following code and save it in a JS file on your server, called "save_screenshoot.js":
//from: https://coursesweb.net/
function saveScreenshoot(ob){
 var php_file ='save_screenshoot.php'; //address of php file that get and save image on server
 var html_elm =(ob && ob.elm) ? ob.elm :'body'; //css selector of html element to get screenshoot
 var imgname =(ob && ob.img) ? ob.img : location.pathname.match(/[^\/]+$/i)[0].replace(/\.(.*?)$/i, ''); //name of the image to save (page name without extension)

 /* Ajax Function
 Send "data" to "php", using the method added to "via", and pass response to "callback" function
 data - object with data to send, name:value; ex.: {"name1":"val1", "name2":"2"}
 php - address of the php file where data is send
 via - request method, a string: 'post', or 'get'
 callback - function called to proccess the server response
 */
 function ajaxSend(data, php, via, callback) {
 var ob_ajax = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //XMLHttpRequest object

 //put data from 'data' into a string to be send to 'php'
 var str_data ='isajax=1';
 for(var k in data){
 k = k.toString();
 if(data[k] || data[k] ==''){
 str_data +='&'+ k +'='+ data[k].toString().replace(/\?/g, '?').replace(/=/g, '=').replace(/&/g, '&').replace(/[ ]+/g, ' ').replace(/[\+]/g, '+');
 }
 }

 //send data to php
 ob_ajax.open(via, php, true);
 if(via =='post') ob_ajax.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
 ob_ajax.send(str_data);

 //check the state request, if completed, pass the response to callback function
 ob_ajax.onreadystatechange = function(){
 if (ob_ajax.readyState == 4) callback(ob_ajax.responseText);
 }
 }

 var getScreenshoot = function(){
 //Uses HTML2Canvas to capture screenshoot of <body> content
 html2canvas(document.querySelector(html_elm)).then(canvas => {
 //get base64 string data of the screenshoot
 var base64image = canvas.toDataURL('image/png');

 //set data that will be send with ajaxSend() to php (base64 image-data of the canvas, and image-name)
 var img_data = {cnvimg:base64image, imgname:imgname};

 //send image-data to php file, then alert response
 ajaxSend(img_data, php_file, 'post', function(resp){
 var resp = JSON.parse(resp) ||{};
 if(resp.re && scrn_img) scrn_img.innerHTML ='<a href="'+resp.re+'" target="_blank">See Screenshoot</a>';
 else if(resp.er) alert(resp.er);
 });
 });
 }

 //add button Save-Screenshoot in the page to call getScreenshoot() on click
 var js_save_scrht = document.getElementById('js_save_scrht');
 if(js_save_scrht){
 js_save_scrht.insertAdjacentHTML('beforebegin', '<div id="scrn_btn_img" style="text-align:center;margin:8px auto;"><button id="btn_save_scrht">Save Screenshoot</button><h4 id="scrn_img"></h4></div>');
 var scrn_btn_img = document.getElementById('scrn_btn_img');
 var btn_save_scrht = document.getElementById('btn_save_scrht');
 var scrn_img = document.getElementById('scrn_img');
 if(btn_save_scrht) btn_save_scrht.addEventListener('click', (e)=>{
 scrn_btn_img.style.display ='none';
 getScreenshoot();
 window.setTimeout(function(){ scrn_btn_img.style.display ='block';}, 1000);
 });
 }
}

4. Add the following code to the end of the html page content (before the ending tag </body>):
<script src="html2canvas.js"></script>
<script src="save_screenshoot.js" id="js_save_scrht"></script>
<script>
//css selector that represents the html element to which to take screenshoot
var scrn_elm ='body'; //for example: #id_elm

//name of the PNG image with the screenshoot to save on server
//here, page name without extension
var scrn_img = location.pathname.match(/[^\/]+$/i)[0].replace(/\.(.*?)$/i, '');

//object that get the screenshoot
var save_scrht = new saveScreenshoot({elm:scrn_elm, img:scrn_img});
</script>

- In the scrn_elm variable it is defined the css selector that represents the html element to which to take screenshoot. Default "body", takes a screenshoot of all the page.
- In the scrn_img variable it is defined the name of the PNG image with the screenshoot to save on server. Default, page name from URL (without extension).

The script will display a "Save Screenshoot" button in the place where you add the code above.
When that button is clicked, it will be hidden to not be included in image, then the screenshoot is sent with ajax to the php script which will save it in a png image file on server.
After the screenshoot is saved, the ajax script will add a "See Screenshoot" link (after button) which will open a window with the PNG image.

Demo: html2canvas - Save page screenshoot

Wait a few seconds to load data. Then will be displayed a Select box to choose what screenshoot to take, then click on the button, it will open a pop-up with selected screenshoot.

Getting Screenshoot..

-
Allow your browser to open the pop-up window.
Waith a few seconds till the image is created.

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML element can be used to embed a SWF flash content?
<object> <div> <script>
<object type="application/x-shockwave-flash" data="file.swf" width="500" height="250">
 <param name="src" value="file.swf" />
 Your browser not support SWF.
</object>
Which CSS pseudo-class adds a style to an input form field that has keyboard input focus?
:active :focus :hover
input:focus {
  background-color: #88fe88;
}
Click on the instruction which converts a JSON string into a JavaScript object.
JSON.stringify(javascript_object) object.toString() JSON.parse(json_string)
var jsnstr = '{"url": "http://coursesweb.net/", "title": "Web Development Courses"}';
var obj = JSON.parse(jsnstr);
alert(obj.url);
Indicate the PHP function which can be used to create or write a file on server.
fopen() file_put_contents() file_get_contents()
if (file_put_contents("file.txt", "content")) echo "The file was created";
else echo "The file can not be created";
html2canvas - Save page screenshoot on server

Last accessed pages

  1. Get and Modify content of an Iframe (32367)
  2. $_GET, $_POST and $_REQUEST Variables (33884)
  3. Ajax-PHP Chat Script (49508)
  4. JavaScript Course - Free lessons (31647)
  5. Volume and Surface Area Calculator for 3D objects (11276)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (310)
  2. The Mastery of Love (48)
  3. CSS cursor property - Custom Cursors (36)
  4. Read Excel file data in PHP - PhpExcelReader (35)
  5. PHP-MySQL free course, online tutorials PHP MySQL code (31)