h5 canvas 显示rgb

最新推荐文章于 2024-05-17 15:26:01 发布

AI算法网奇

最新推荐文章于 2024-05-17 15:26:01 发布

阅读量3.7k

点赞数

本文链接：https://blog.csdn.net/jacke121/article/details/88091614

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script src="/static/js/jquery-2.1.1.min.js"></script>
</head>
<body>
{#<img id="demo" src="/code">#}

<canvas id="divPic"  width="1280" height="720" style="border:1px solid #ccc;display: block;">
        当前浏览器不支持canvas
        <!-- 如果浏览器支持canvas，则canvas标签里的内容不会显示出来 -->
</canvas>
<button id="switch" οnclick="sw()">启/停</button>
<script type="text/javascript">
{#var status=0;#}
{#var intervalid;#}
{#function initvideo(){#}
{#   intervalid=setInterval(function(){#}
{#        var time=new Date().getTime();#}
{#        $('#demo').attr('src','/code?tome='+time);#}
{#    }, 45);#}
//}
{#function sw(){#}
{#    if(status==0){#}
{#        status=1;#}
{#        initvideo();#}
{#    }else{#}
{#        status=0;#}
{#        clearInterval(intervalid);#}
{#    }#}
//}
var imgObj = new Image();
$(function(){
        var socket;
        var host = "ws://127.0.0.1:9999/";
        socket = new WebSocket(host);
        {#socket.binaryType = "arraybuffer";#}
        try {
            socket.onopen = function (msg) {
                // $("btnConnect").disabled = true;
                //socket.send(encodeUtf8("rtsp_client\n"));
                {#socket.send("354354354");#}
                alert("socket conn!");
                console.log('connected\n');
            };
            socket.onmessage = function (msg) {
                {#console.log(msg);#}
                var c = document.getElementById("divPic");
                //创建image对象

                var ctx=c.getContext("2d");
                var imgData=ctx.createImageData(100,100);
                for (var i=0;i<imgData.data.length;i+=4)
                  {
                  imgData.data[i+0]=255;
                  imgData.data[i+1]=i%255;
                  imgData.data[i+2]=0;
                  imgData.data[i+3]=255;
                  }
                ctx.putImageData(imgData,10,10);

                var ctx=c.getContext("2d");
                aaaa=window.URL.createObjectURL(msg.data);
                imgObj.src = aaaa;
                //待图片加载完后，将其显示在canvas上
                imgObj.onload = function(){
                    var ctx = c.getContext('2d');
                    ctx.drawImage(this, 0, 0);//this即是imgObj,保持图片的原始大小：470*480
                    //ctx.drawImage(this, 0, 0,1024,768);//改变图片的大小到1024*768
                }
                    {#data=eval(msg)["data"];#}
                    {#socre=eval(msg)["socre"];#}

            };
            socket.onclose = function (msg) {
                {#alert("socket closed!");#}
                console.log('socket close')
            };
        }
        catch (ex) {
            log(ex);
        }
});

</script>
</body>
</html>

AI算法网奇

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
h5 canvas 显示rgb

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;test&lt;/title&gt; &lt;script src="/static/js/jquery-2.1.1.min.js&q
复制链接

扫一扫