图片效验验证码实现
2020-08-07 本文已影响0人
zyghhhh
- 原理是请求后端接口但是后端返回的直接就是一个验证码图片，我们无法直接渲染，这时我们可以在前端自己把它转成base64格式然后放到Img标签中去渲染，这样也就可以实现为请求回来的验证码，方便点击刷新
-
核心代码如下
image.png
说明：
- 设置请求响应返回的数据类型为arraybuffer
- 用new Buffer()方法转译图片，然后再用toString转成字符串
3 最后以base64的格式把转化后的字符串拼上去形成一个base64字符串
4 然后就可以拿着这个处理好的base64去放到img中渲染显示了
5 要实现点击刷新，就在点击的时候去发请求获取这个图片然后走上面的流程就可以了。
下面简单介绍一下new Buffer():
- 构造函数new Buffer()的第一个参数可以是一个Number，Array或String。第二个参数为可选参数，用来表示encode的类型，可以是AscII, Utf8, Ucs2, Base64, Binary, Hex。默认值是Utf8
效果图
image.png
