store current snapshot/testbild locally on enter.

js/cctv-control.js

@@ -34,10 +34,10 @@ function changeCam()	{
 	if (cam <= 7 && cam >= 0)	{
 			camDisplay = cam + 1;
 			display.innerHTML = '<p class="camnumber">' + camDisplay + '</p>';
-			display.innerHTML += '<img src="http://' + camHost + '/cam/' + cam + '/stream.mjpeg" />';
+			display.innerHTML += '<img id="camImage" src="http://' + camHost + '/cam/' + cam + '/stream.mjpeg" />';
 	}
 	else	{
-			display.innerHTML = '<img src="img/testbild.png" />';
+			display.innerHTML = '<img id="camImage" src="img/testbild.gif" />';
 	}
 }
 
@@ -51,6 +51,47 @@ function controlCam(direction)	{
 	}
 }
 
+//save current screenshot in local storage
+function saveImage()	{
+	
+	var storageFiles = {}, 			//local storage object
+	    xhr = new XMLHttpRequest(),
+	    blob,
+	    fileReader = new FileReader(),
+	    snapShot = new Image(),		//dummy-object to display snapshot
+	    imgCanvas = document.createElement("canvas"), 
+	    imgContext = imgCanvas.getContext("2d");
+
+
+	xhr.open("GET", 'img/testbild-' + camDisplay + '.png', true);
+	xhr.responseType = "arraybuffer";
+	
+	xhr.addEventListener("load", function () {
+		if (xhr.status === 200) {
+			
+			blob = new Blob([xhr.response], {type: "image/png"});
+		
+	
+			fileReader.onload = function (evt) {	
+	        	        var result = evt.target.result;
+			
+				snapShot.src = result;
+	        	        
+	        	        try {
+	        	            localStorage.setItem("snapShot", result);
+	        	        }
+	        	        catch (e) {
+	        	            console.log("Storage failed: " + e);
+	        	        }
+			};
+			
+			fileReader.readAsDataURL(blob);
+		}
+	}, false);
+
+	xhr.send();
+}
+
 function keyDown(event)	{
 
 	switch(event.keyCode)	{
@@ -98,5 +139,8 @@ function keyDown(event)	{
 		case 40: // arrow down
 			controlCam("down");
 			break;
-		}
+		case 13: //enter
+			saveImage();
+			break;
+	}	
 }