帮助捕获base 64中websocket的图像 [英] Help with capture images of websocket in base 64
本文介绍了帮助捕获base 64中websocket的图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
你好，我有一台连接到GoPro摄像头的服务器，它以base64格式发送图像，可以在localhost上看到，现在我需要捕获截图，但我不能，任何想法？
Hello, I have a server connected to a GoPro camera, which sends the images in base64 format, and can be seen on localhost, now I need to capture screenshot, but I can not, any ideas?
<html>
<head>
<title>Go Pro cliente</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" charset="utf-8">
var flag = false;
var imgArray = new Array();
$(document).ready(function(){
if ("WebSocket" in window) {
var ws_path = 'ws://' + window.location.host + window.location.pathname + 'ws';
//alert(ws_path);
var ws = new WebSocket (ws_path);
//alert(ws);
ws.onopen = function () {
ws.send(1);
};
ws.onmessage = function (msg)
{
$("#cam").attr('src', 'data:image/jpg;base64,' + msg.data);
if ( flag == true)
{
$("#img").attr('src', 'data:image/jpg;base64,' + msg.data);
flag = false;
var url = img.src.replace('data:image/jpg;base64,' + msg.data);
}
ws.send(1);
};
ws.onerror = function (e) {
console.log(e);
ws.send(1);
};
} else {
alert("WebSocket no soportado");
}
});
function capture()
{
flag = true;
};
</script>
</head>
<body>
<div id="video"><center>
<H1>Video caputado desde Go Pro</H1>
<img id="cam" src=""/><br>
<button id="capture" onclick="capture();" type="button">Screen Shot</button>
</div>
<div id="screenshot">
<h2><center>Capturas tomadas</h2>
<img id="url" src="" /><br>
</div>
<a id="acapture" href="" download="" style="display : none"></a>
</body>
</html>
推荐答案
（ document ）。ready（ function （）{
if （ WebSocket window ）{
var ws_path = ' ws：//' + window 。 location .host + window 。 location .pathname + ' ws' ;
// alert（ws_path）;
var ws = new WebSocket（ws_path）;
// alert（ws）;
ws.onopen = function （）{
ws.send（ 1 ）;
};
ws.onmessage = function （msg）
{
(document).ready(function(){ if ("WebSocket" in window) { var ws_path = 'ws://' + window.location.host + window.location.pathname + 'ws'; //alert(ws_path); var ws = new WebSocket (ws_path); //alert(ws); ws.onopen = function () { ws.send(1); }; ws.onmessage = function (msg) {
（ ＃cam）。attr（' src'，' data：image / jpg; base64，' + msg.data）;
if （flag == true ）
{
("#cam").attr('src', 'data:image/jpg;base64,' + msg.data); if ( flag == true) {
（ ＃img）。attr（' src'，' data ：image / jpg; base64，' + msg.data）;
flag = false ;
var url = img.src.replace（' data：image / jpg; base64，' + msg.data）;
}
ws.send（ 1 ）;
};
ws.onerror = function （e）{
console .log（e ）;
ws.send（ 1 ）;
};
} else {
alert（ WebSocket no soportado）;
}
}）;
function capture（）
{
flag = true ;
};
< / script >
< / head >
< 正文 >
< ; div id < span class =code-keyword> = video > < center >
< H1 > 视频caputado desde Go Pro < / H1 >
< img id = cam src = / > < br >
< 按钮 id = 捕获 onclick = capture（）; type = 按钮 > 屏幕截图< / button >
< / div >
< div id = screenshot >
< h2 > < center > Capturas tomadas < / h2 >
< img id = url src = < span class =code-attribute> / > < br >
< / div >
< a id = acapture href = download = style = display：none > < / a >
< / body >
< / html >
("#img").attr('src', 'data:image/jpg;base64,' + msg.data); flag = false; var url = img.src.replace('data:image/jpg;base64,' + msg.data); } ws.send(1); }; ws.onerror = function (e) { console.log(e); ws.send(1); }; } else { alert("WebSocket no soportado"); } }); function capture() { flag = true; }; </script> </head> <body> <div id="video"><center> <H1>Video caputado desde Go Pro</H1> <img id="cam" src=""/><br> <button id="capture" onclick="capture();" type="button">Screen Shot</button> </div> <div id="screenshot"> <h2><center>Capturas tomadas</h2> <img id="url" src="" /><br> </div> <a id="acapture" href="" download="" style="display : none"></a> </body> </html>
这篇关于帮助捕获base 64中websocket的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
