0

I'm using an ip camera.

For live stream:

<img id="ip-camera-frame" src="http://192.168.1.10/GetData.cgi?CH=1"></img>

I take a snapshot from camera with link "/GetImage.cgi?CH=0" and i can set "img" tag in modalbox.

This snapshot is OK, I want to download captured image but all download methots getting an new capture and download.

<div id="snapshot" class="modal-demo">
<div class="custom-modal-text">
    <img id="snapshot-frame" width="100%"></img >
</div>
<div class="modal-footer">
    <button type="button" id="save-snapshot">Download Snapshot</button>
</div>

Burak Dalkıran
  • 141
  • 2
  • 2

1 Answers1

0

You can try to copy image data from already loaded and displayed image. as it describe here:

Get image data in JavaScript?

and download it like it described here:

Browser/HTML Force download of image from src="data:image/jpeg;base64..."

so you should have something like:

document.getElementById('save-snapshot').addEventListener("click", function(e) {



var img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.onload = function() {
var   canvas = document.createElement("canvas");
    canvas.width = this.width;
    canvas.height = this.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(this, 0, 0);
    // guess the original format, maybe "image/jpg"
    var dataURL = canvas.toDataURL("image/png");

    window.open(dataURL.replace(/^data:image\/(png|jpg);base64,/, ""));
};
img.src = document.getElementById("ip-camera-frame").src;

}, false);
Community
  • 1
  • 1
2oppin
  • 1,941
  • 20
  • 33
  • Updated an answer. There maybe Cross-Origin security error (in previous solution), so the solution is to create a copy if image. – 2oppin Nov 16 '16 at 07:50