用canvas绘制动态图片，图片通过websocket从服务器获取

简单的说就是想从服务器获取文件画到canvas上，然后会报错Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided. 有大大可以告诉我原因么，我就想测试一下，画个图出来

贴上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>

</head>
<body onload="init()">
    <canvas id="myCanvas"></canvas>

    <script>
        var url = undefined;
        var wsUri ="ws://134.91.11.156:8679";

        canvas = document.getElementById('myCanvas');
        ctx = canvas.getContext('2d');
        img= new Image();



        function init() {
            output = document.getElementById("output");
            testWebSocket();
        }

        function testWebSocket() {
            websocket = new WebSocket(wsUri);
            websocket.binaryType = "blob";

            websocket.onopen = function(evt) {
                onOpen(evt)
            };
            websocket.onclose = function(evt) {
                onClose(evt)
            };
            websocket.onmessage = function(evt) {
                onMessage(evt)
            };



            websocket.onerror = function(evt) {
                onError(evt)
            };
        }

        function onOpen(evt) {
            writeToScreen("CONNECTED to:"+wsUri);
            console.log("Websocket CONNECTED to " + wsUri);
            doSend('{"type": "InitRenderer",  "req": { "rid": 1, "sid": 0, "params": { "protocol": "tcp.ws", "rendertype": "GridLeapingRenderer", "fileid": "UVFData@./WholeBody-SCANLINE-132-lz4.uvf", "ioendpoint": "tcp.prefixed:134.91.11.156:6678", "streamingparams": { "xres": 1024, "yres": 768 } } } }');// is the command right?
        }// if it send message successful, show measage on the screen

        function onClose(evt) {
            writeToScreen("DISCONNECTED");
            console.log("Websocket DISCONNECTED");
        }// show close message if the connent is over

        function onMessage(evt) {
            writeToScreen('<span style="color: blue;">RESPONSE: '+evt.data +'</span>');// get the response and show it on screen,using "evt.data" is right? Can I direct show the JSON on the screen?

            if(url != undefined)
                URL.revokeObjectURL(url);

            img.onload = function() {
                console.log("drawing pic come on come on");
                ctx.drawImage(img, 0, 0);
            }
            console.log("replacing image source");

            url = URL.createObjectURL(evt.data); //Create DOMString ?? I think maybe something wrong here...
            console.log(url);// can not get the url, i dont know why

            img.src = url; // if i can get the url, I can draw the pic

            websocket.close();
        }

        function onError(evt) {
            writeToScreen('<span style="color: red;">ERROR:</span> '+ evt.data);
        }// if sending is failed,show the message

        function doSend(message) {
            writeToScreen("SENT: " + message);
            websocket.send(message);
        } // send the command to the server

        function writeToScreen(message) {
            var pre = document.createElement("p");
            pre.style.wordWrap = "break-word";
            pre.innerHTML = message;
            output.appendChild(pre);
        } // write the message on the screen

    </script>

    <h2>WebSocket Test</h2>
    <div id="output"></div>




</body>
</html>

我知道了，服务器反馈的并不是DOMString，所以出错

【热门文章】