前端接收字节数据流，显示图片
前端接收字节数据流，显示图片
<!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>
共同学习，共同进步，若有补充，欢迎指出，谢谢！
