如何从HTML中的MJPEG流创建快照 [英] How to make an snapshot from a MJPEG stream in HTML
本文介绍了如何从HTML中的MJPEG流创建快照的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有以下HTML网页：
I have the following HTML web page:
<html>
<body>
<IMG SRC='http://85.46.64.155/axis-cgi/mjpg/video.cgi'>
</body>
</html>
此网页显示流式MJPEG数据的IP摄像机的源。您可以在此尝试上述代码： http://jsfiddle.net/jU4aq/ （它不工作来自IE）
This web page displays the feed of an IP camera streaming MJPEG data. You can try the above code here: http://jsfiddle.net/jU4aq/ (it doesn't work from IE)
我的问题是如何制作该Feed的快照。基本上我想添加一个按钮，当用户点击它时，会弹出一个对话框，并将提供保存图像的选项。
My question is how I can make a snapshot of that feed. Basically I want to add a button that when the user clicks on it, a dialog will pop up and will give you the option to save the image.
推荐答案
您的信息流现在似乎无法正常工作，但尝试一些画布javascript，例如：
Your stream doesn't seem to be working right now but try a bit of canvas javascript, like:
<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>
这篇关于如何从HTML中的MJPEG流创建快照的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
