如何使一個快照從MJPEG流中的HTML

我有以下的HTML網頁：如何使一個快照從MJPEG流中的HTML

<html> 
<body> 
<IMG SRC='http://85.46.64.155/axis-cgi/mjpg/video.cgi'> 
</body> 
</html>

該網頁顯示的IP攝像頭流MJPEG數據的飼料。你可以在這裏嘗試上面的代碼：http://jsfiddle.net/jU4aq/（它不適用於IE）

我的問題是我如何製作該提要的快照。基本上我想添加一個按鈕，當用戶點擊它時，會彈出一個對話框，並讓您選擇保存圖像。

來源

2011-02-28 LEM

這在純HTML中絕對不可行。您可以使用哪些客戶端和（更現實的）服務器端語言？ –

Javascript是我唯一的選擇。我無法使用任何服務器端語言。 – LEM

嗯。將圖像提取到畫布元素中可能會有效，如果它可靠地抓取當前幀。重新標記以獲得更好的曝光....但是，要在本地以「另存爲」下載的方式實際提供文件，您可能還需要Flash。 –

你流似乎不正確的是現在的工作，但試了一下畫布的JavaScript，如：

<html> 
<body> 
<IMG id="myImage" SRC='http://85.46.64.155/axis-cgi/mjpg/video.cgi'> 

<input type="button" id="save" value="Save to PNG"> 

<script type="text/javascript"> 
document.getElementById('save').onclick = function() { 

var c = document.createElement('canvas'); 
var img = document.getElementById('myImage'); 
c.width = img.width; 
c.height = img.height; 
var ctx = c.getContext('2d'); 


ctx.drawImage(img, 0, 0); 
//window.location = c.toDataURL('image/png'); 
window.open(c.toDataURL('image/png')) 
}; 

</script> 

</body> 
</html>

來源

2011-02-28 18:25:21

非常感謝您的回覆。我只是在Firefox上試過，但是當我點擊保存按鈕時沒有任何反應。它應該顯示一個保存對話框？該流現在適合我。如果它不起作用，您還可以嘗試更快的http://extcam-16.se.axis.com/axis-cgi/mjpg/video.cgi。謝謝 – LEM

哦，我的。從規範中的4.8.11.3開始：「每當調用其origin-clean標誌設置爲false的canvas元素的toDataURL（）方法時，該方法必須引發SECURITY_ERR異常。」顯然，在畫布上繪製圖像的行爲不允許您使用toDataURL。如果您將託管的HTML與託管源相同，請使用它。你必須嘗試。 –

請注意，如果您不打算將HTML託管在與源相同的源（域）上，則可能需要做一些棘手的事情。 –