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 screenshootOr:
- Download Script - Save page screenshoot (92 KB)
<?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);
//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); }); } }
<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>
<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>
input:focus { background-color: #88fe88; }
var jsnstr = '{"url": "http://coursesweb.net/", "title": "Web Development Courses"}'; var obj = JSON.parse(jsnstr); alert(obj.url);
if (file_put_contents("file.txt", "content")) echo "The file was created"; else echo "The file can not be created";