我有以下 HTML 网页：
<html>
<body>
<IMG SRC='http://85.46.64.155/axis-cgi/mjpg/video.cgi'>
</body>
</html>
此网页显示 IP 摄像机流式传输 MJPEG 数据的源。您可以在这里尝试上面的代码：http://jsfiddle.net/jU4aq/（它在 IE 中不起作用）
我的问题是如何制作该提要的快照。基本上我想添加一个按钮，当用户单击它时，会弹出一个对话框，并为您提供保存图像的选项。
您的流现在似乎无法正常工作，但请尝试一些画布 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>
使用 AXIS api 获取快照，您可以在这里获取： http://www.axis.com/techsup/cam_servers/dev/cam_http_api_index.php
在你的情况下，URL是 “http://your.server/axis-cgi/jpg/image.cgi”
您还可以使用其他参数，例如分辨率和压缩率
有些网络摄像机有快照路径。例如，Vivotek 的运行位置为“/cgi-bin/viewer/video.jpg?streamid=0”。
您可以设置一个 HTML 按钮来触发 JS 事件，该事件将创建一个将该 URL 作为“src”属性的 IMG DOM 元素。但您可能需要解决跨域问题http://en.wikipedia.org/wiki/Same_origin_policy。
我见过最多的解决方案是使用服务器端语言，如php、node、python、ruby等，下载快照并将其保存为网页的公共文件。
西蒙·萨里斯（Simon Sarris）稍作修改的答案对我有用：
<img id="snapshot" src="mjpeg_stream_url" />
document.getElementById('snapshot').onclick = function () {
const canvas = document.createElement('canvas');
const img = document.getElementById('snapshot');
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
const link = document.createElement('a');
link.download = 'snapshot.png';
link.href = canvas.toDataURL('image/png');
link.click();
};