图片效验验证码实现

作者: zyghhhh | 来源:发表于2020-08-07 11:38 被阅读0次
  • 原理是请求后端接口但是后端返回的直接就是一个验证码图片,我们无法直接渲染,这时我们可以在前端自己把它转成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

相关文章

网友评论

    本文标题:图片效验验证码实现

    本文链接:https://www.haomeiwen.com/subject/yskfdktx.html