diff options
| -rw-r--r-- | js/cctv-control.js | 50 |
1 files changed, 47 insertions, 3 deletions
diff --git a/js/cctv-control.js b/js/cctv-control.js index c79346d..3d5fa68 100644 --- a/js/cctv-control.js +++ b/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; + } } |