前端接收字節數據流，顯示圖片
<!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>
共同學習，共同進步，若有補充，歡迎指出，謝謝！