主页 / 问题 / 1099147
Accepted
BERTOLDO
Asked:2020-03-24 21:30:54 +0000 UTC2020-03-24 21:30:54 +0000 UTC

如何在 JS 中从 WebSocket 服务器捕获 jpg？

  • 772

服务器发送 jpg 图像。如何在 JS 中实现“抓取”图像并将其显示在 html 页面上的机制？

<!DOCTYPE html>
<html lang="ru">
 <head>
    <meta charset="utf-8">
    <title>Panel</title>
    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="styles.css">
 </head>

 <body>
    <script src = "script.js"></script>

    <div class="header">
        <a href = "index.html">
            <h2 id = "log">Testing Panel</h2>
        </a>
    </div>
    <!--<div id = "camera"></div>-->

    <canvas id="canvas" width="640" height="480" style="border:1px solid #d3d3d3;">
        <img src=""></img>
    </canvas>

    <div class = "control">
        <button class="button button1">UP</button>
        <button class="button button2">DOWN</button>
        <button class="button button3">LEFT</button>
        <button class="button button4">RIGHT</button>
    </div>

    <input value = "set..." id = "input" />

 </body> 
</html>

JS

var input = document.getElementById("input");

const ws = new WebSocket("ws://localhost:8001");
        var status = document.querySelector("#status");

        //открытие соединения
        ws.onopen = function(event) {
            status.innerHTML = "соединение установлено";
            window.alert("online");
            while (true){
                status.innerHTML = "kk";

            }
        }

        //закрытие соединения
        ws.onclose = function(event) {
            status.innerHTML = "соединение разорвано";
            window.alert("offline");
        }

        //получение данных
        ws.onmessage = function(event) {

        }

        //возникновение ошибки
        ws.onerror = function(event){

        }
javascript

1 个回答

  1. Best Answer
    let ws = new WebSocket("ws://somewhere.ru/ws");

ws.onmessage = m => {
    let image = new Image();
    image.src = URL.createObjectURL(m.data);
    document.body.append(image);
}

    如果html中有某个img，需要修改它的数据，那么：

    let ws = new WebSocket("ws://somewhere.ru/ws");
let image = document.getElementById('my_img');

ws.onmessage = m => {
   image.src = URL.createObjectURL(m.data);
}

    如果是canvas，那你就试试吧，希望你能连线说对不对：

    let ws = new WebSocket("ws://somewhere.ru/ws");
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

ws.onmessage = m => {
    // ctx.putImageData(new ImageData(m.data, w, h), 0, 0); // w: ширина транслируемого видео, h: высота транслируемого видео
    ctx.putImageData(m.data, 0,0);
}

    间接方式（可能很慢，需要检查）：

    let ws = new WebSocket("ws://somewhere.ru/ws");
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

ws.onmessage = m => {
    let img = new Image();
    img.src = URL.createObjectURL(m.data);
    img.onload = function() { // Не уверен, что надо ждать загрузки, проверяйте и без нее
        ctx.drawImage(image, 0, 0, w, h, 0, 0, 640, 480); // w,h - ширина и высота транслируемого видео
        }
}
    • 3

相关问题