1. Introduction
We often see verification codes in various form modules on web pages. Common types of verification codes include: SMS verification codes, graphic verification codes, etc. Recently, I have used graphic verification codes in my work, but what the backend interface returns is not a picture address, but a picture data stream, as follows:
Network view:
console.log output:
We cannot directly display the image data stream on the page, so we need to find a way to display the image verification code on the page normally. Here I list two methods: <img>request the interface through the src of the label, and convert the data stream through native ajax.
Second, the specific plan
1. <img>The src of the label directly requests the interface
<img>The src attribute of the label originally requests the corresponding image data according to the address. Since the interface returns the data stream of the image verification code, we can directly request the interface through src, and then the graphic verification code returned by the interface can be <img>displayed Come out, when you click to switch the verification code, we can use js to manipulate the <img>src attribute of the label in the click event to make it request the interface again and get a new picture verification code:
Specific code:
<!-- 此处以vue为例，所以通过ref获取元素，修改src属性，原生js代码原理相同 -->
<img ref="vcImg" src="/api/v1/captcha" alt="验证码" @click="getVerifyCode()">
<script>
// 重新获取表单验证码
getVerifyCode () {
// 直接通过src去请求验证码图片 通过Math.random()防止缓存问题
this.$refs.vcImg.src = '/api/v123/captcha?' + Math.random()
},
</script>
Page effect:
2. Native ajax for data flow conversion
Regarding this method, first we need to use responseTypethe properties of the ajax object to set the data type of the conversion request response, and then use the createObjectURL()method of the URL object of the window to convert the response data into a URL object, and then assign the object to the imgsrc attribute that is The graphic verification code can be displayed normally.
Specific code:
<!-- 以Vue为例 -->
<img :src="src" alt="验证码" @click="getVerifyCode()">
<script>
export default {
data () {
return {
src: '' // 存储url对象
}
},
methods: {
// 获取表单验证码
getVerifyCode () {
// 暂存this对象
const that = this
// 获取window的URL对像 并做好浏览器兼容性处理
const windowUrl = window.URL || window.webkitURL
// 开始ajax请求
const xhr = new XMLHttpRequest()
// 验证码请求地址
const url = '/api/v123/captcha'
xhr.open('GET', url, true)
// 设置响应数据的类型 blod是将响应数据转换成二进制数据的Blob对象
xhr.responseType = 'blob'
xhr.onload = function () {
if (this.status === 200) {
const blob = this.response
// 将响应数据转换成url对象 赋值给src变量 传递给img
that.src = windowUrl.createObjectURL(blob)
}
}
xhr.send()
}
}
}
</script>
Page effect:
Notice:
First, when setting responseTypeproperties, we need to ensure that the data type that the server actually responds to is compatible with this format. If the data returned by the server responseTypeis not , the value of response will be null.
Secondly, the calling method of the URL object of window may be different in different browsers, so compatibility processing must be done.
Finally, when calling createObjectURL() the method, regardless of whether the parameters are the same, a new url object will be created for each call. Although the browser will automatically release them when the document is unloaded, for the best user experience, it is best to choose the appropriate URL object. The opportunity URL.revokeObjectURL()to release the previous url object through the method.