h5 canvas 顯示rgb

ShellCollector發表於2019-03-03
H5Canvas

 

<!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" onclick="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>

相關文章