JS ekrano screenshot paėmimas ir siuntimas į serverį

http://permadi.com/2010/10/html5-saving-canvas-image-data-using-php-and-ajax/
http://www.jedox.com/en/screen-shot-web-via-javascript-saving-back-server
https://html2canvas.hertzen.com/
html to canvas alternatyva: http://cburgmer.github.io/rasterizeHTML.js/ taip pat https://github.com/Irrelon/html-to-canvas

function saveViaAJAX()
	{
	var testCanvas = document.getElementById("testCanvas");
	var canvasData = testCanvas.toDataURL("image/png");
	var postData = "canvasData="+canvasData;
	var debugConsole= document.getElementById("debugConsole");
	debugConsole.value=canvasData;
	//alert("canvasData ="+canvasData );
	var ajax = new XMLHttpRequest();
	ajax.open("POST",'testSave.php',true);
	ajax.setRequestHeader('Content-Type', 'canvas/upload');
	//ajax.setRequestHeader('Content-TypeLength', postData.length);
	ajax.onreadystatechange=function()
	{
	if (ajax.readyState == 4)
	{
	//alert(ajax.responseText);
	// Write out the filename.
	document.getElementById("debugFilenameConsole").innerHTML="Saved as<br><a target='_blank' href='"+ajax.responseText+"'>"+ajax.responseText+"</a><br>Reload this page to generate new image or click the filename to open the image file.";
	}
	}
	ajax.send(postData);
	}

Tačiau mums reikia html versti į canvas, naudojant html2canvas.js

function takeScreenShot(){

html2canvas(window.parent.document.body, {

onrendered: function(canvas) {

var cand = document.getElementsByTagName('canvas');

if(cand[0] === undefined || cand[0] === null){

}else{

//cand[0].remove();

document.body.removeChild(cand[0]);

}

document.body.appendChild(canvas);

}

});

}

Server side:

<?php

if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))

{

  // Get the data

  $imageData=$GLOBALS['HTTP_RAW_POST_DATA'];

  // Remove the headers (data:,) part.

  // A real application should use them according to needs such as to check image type

  $filteredData=substr($imageData, strpos($imageData, ",")+1);

  // Need to decode before saving since the data we received is already base64 encoded

  $unencodedData=base64_decode($filteredData);

  //echo "unencodedData".$unencodedData;

  // Save file. This example uses a hard coded filename for testing,

  // but a real application can specify filename in POST variable

  $fp = fopen( 'test.png', 'wb' );

  fwrite( $fp, $unencodedData);

  fclose( $fp );

}

?>