验证码——vue中后端返回的图片流如何显示

最新推荐文章于 2024-08-13 10:02:39 发布

原创

最新推荐文章于 2024-08-13 10:02:39 发布 · 6.9k 阅读

标签

#vue.js #python #人工智能

本文介绍了两种前端实现验证码的方法：一是通过调用接口获取验证码数据并在canvas上渲染；二是接收后端返回的图片流（blob或arraybuffer），展示在页面上。示例中使用了vue2.6和axios，详细讲解了canvas组件的编写以及如何处理图片流数据。

前言

一、p调用接口获取验证码 + canvas画布渲染？

前言

登录界面经常会有验证码，验证码的实现方式也有很多，我目前做过以下两种：

1.调用接口获取验证码 + canvas画布渲染

2.后端返回图片（数据流），前端显示

这两种方式都比较简单，本次项目技术栈为：vue2.6 + axsio ，接下来一起看看把~

一、p调用接口获取验证码 + canvas画布渲染？

这个比较简单，就是需要自己写一份canvas ,将后端获取过来得验证码显示出来，后续将验证码和识别码一起传递给后端，后端校验账户密码验证码是否一致。

1.编写canvas组件

这里我把他写成一个组件

<template>
  <div class="s-canvas" id="canvas">
    <canvas id="s-canvas"></canvas>
  </div>
</template>

<script>
export default {
  name: 'SIdentify',
  data() {
    return {
      w: '',
      h: '',
    }
  },
  props: {
    identifyCode: {
      type: String,
      default: '1234',
    },
    fontSizeMin: {
      type: Number,
      default: 26,
    },
    fontSizeMax: {
      type: Number,
      default: 30,
    },
    backgroundColorMin: {
      type: Number,
      default: 255,
    },
    backgroundColorMax: {
      type: Number,
      default: 255,
    },
    colorMin: {
      type: Number,
      default: 0,
    },
    colorMax: {
      type: Number,
      default: 160,
    },
    lineColorMin: {
      type: Number,
      default: 100,
    },
    lineColorMax: {
      type: Number,
      default: 255,
    },
    dotColorMin: {
      type: Number,
      default: 0,
    },
    dotColorMax: {
      type: Number,
      default: 255,
    },
    contentWidth: {
      type: Number,
      default: 121,
    },
    contentHeight: {
      type: Number,
      default: 50,
    },
  },
  methods: {
    //计算外盒子高度
    boxSize() {
      var contan

最低0.47元/天解锁文章