前端接收字節數據流,顯示圖片


 

前端接收字節數據流,顯示圖片

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>DGX測試驗證碼</title>

    </head>
    <body>
        <div>
            <h1>點擊圖片刷新驗證碼</h1>
        </div>
        <br />
        <div>
            <img id="kaptchaImage" />
        </div>

        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script>
            window.onload = function() {
                var request = new XMLHttpRequest();
                request.open("POST", "http://127.0.0.1:1234/captcha/image", true);
                request.responseType = "blob";
                request.onloadend = function() {
                    if (request.readyState === 4) {
                        if ((request.status >= 200 && request.status < 300) || request.status == 304) {
                            var blob = this.response;
                            document.getElementById('kaptchaImage').src = window.URL.createObjectURL(blob);
                        } else {
                            alert("處理請求失敗返回的數據");
                        }
                    }
                }
                request.send();
            };
            $("#kaptchaImage").click(function() {
                var request = new XMLHttpRequest();
                request.open("POST", "http://127.0.0.1:1234/captcha/image", true);
                request.responseType = "blob";
                request.onloadend = function() {
                    if (request.readyState === 4) {
                        if ((request.status >= 200 && request.status < 300) || request.status == 304) {
                            var blob = this.response;
                            document.getElementById('kaptchaImage').src = window.URL.createObjectURL(blob);
                        } else {
                            alert("處理請求失敗返回的數據");
                        }
                    }
                }
                request.send();
            });
        </script>
    </body>
</html>

 

 

注:若是需要校對驗證碼的,需要攜帶cookie的話,就要在請求中設置(獲取圖片的請求和發送校驗的請求),不然可能會校驗不成功(session的刷新問題)

  withCredentials: true,
  crossDomain: true

 

 

處理json格式攜帶的16進制字節數組(未成功處理,這個后面有空再改,先放這里,讀者不用往下看)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>測試驗證碼</title>

    </head>
    <body>
        <div>
            <img id="kaptchaImage" onclick="change();" />
        </div>
        <div>
            <button id="changeImage" style="width: 12.5rem;height: 12.5rem;">刷新圖片</button>
        </div>
        <div>
            <textarea id="showByte" cols="60" rows="15" style="font-size: 1.125rem;" placeholder="顯示收到的字節數組"></textarea>
        </div>
        <div id="imgcontainer"></div>

        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script>
            $("#changeImage").click(function() {
                var request = new XMLHttpRequest();
                request.open("POST", "http://127.0.0.1:1234/captcha/image", true);
                //                request.responseType = "blob";
                request.onloadend = function() {
                    if (request.readyState === 4) {
                        if ((request.status >= 200 && request.status < 300) || request.status == 304) {
                            var result = this.response;
                            alert("reslut: " + result);
                            // 處理Json格式數據
                            var json = JSON.parse(result);
                            var image = json.data.image;
                            var blob = stringToBytes(image);
                            var sessionId = json.data.sessionId;
                            alert("blob: " + blob);
                            // document.getElementById('kaptchaImage').src = window.URL.createObjectURL(image);

                            // var blob = this.response;
                            document.getElementById('kaptchaImage').src = window.URL.createObjectURL(blob);
                            //用下面這個方法似乎賦值不了
                            //$("#kaptchaImage").src = window.URL.createObjectURL(blob);

                            $("#showByte").text(blob);
                        } else {
                            alert("處理請求失敗返回的數據");
                        }
                    }
                }
                request.send();
            });
            // 字符串轉為ArrayBuffer對象,參數為字符串
            function stringToBytes(str) {
                var strArrary = str.split(' ');
                var pos = 0;
                var len = strArrary.length;
                if (len % 2 != 0) {
                    return null;
                }
                len /= 2;
//                var buf = new ArrayBuffer(len);
                var bytes = new Array();
                for (var i = 0; i < len; i++) {
                    var s = str.substr(pos, 2);
                    var v = parseInt(s, 16);
                    bytes.push(v);
                    pos += 2;
                }
//                var blob = new Blob([buf]);  
                var blob = new Blob(bytes);  
                return blob;

                // var buf = new ArrayBuffer(str.length * 2); // 每個字符占用2個字節
                // var bufView = new Uint16Array(buf);
                // for (var i = 0, strLen = str.length; i < strLen; i++) {
                //     bufView[i] = str.charCodeAt(i);
                // }
                // return buf;
            }
        </script>
    </body>
</html>

 

 

 

共同學習,共同進步,若有補充,歡迎指出,謝謝!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM