jQuery, capture Загрузка изображения

Question

Я использую ip-камеру.

Для живого потока:

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

я сделать снимок с камеры с рычажным «/GetImage.cgi?CH=0» и я могу установить «IMG» тег в modalbox.

Этот снимок в порядке, я хочу загрузить захваченное изображение, но все загружаемые снимки получают новый захват и загрузка.

<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> 

Answer 1

Вы можете попытаться скопировать данные изображения из уже загруженного и отображаемого изображения. как это описать здесь:

Get image data in JavaScript?

и скачать его, как это описано здесь:

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

так что вы должны иметь что-то вроде:

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);