图片效验验证码实现

• 原理是请求后端接口但是后端返回的直接就是一个验证码图片，我们无法直接渲染，这时我们可以在前端自己把它转成base64格式然后放到Img标签中去渲染，这样也就可以实现为请求回来的验证码，方便点击刷新
• 核心代码如下 image.png

说明：

1. 设置请求响应返回的数据类型为arraybuffer
2. 用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

• 原文出处
  http://www.xjishu.com/zhuanli/55/201810716576.html/