图形验证码

<canvas bindtouchend="onTap" style="width:{ {cvs.width}}px;height:{ {cvs.height}}px;" canvas-id="canvas"></canvas>
    //index.js
    //获取应用实例
    import Mcaptcha from "../../utils/mcaptcha.js";
    function getRanNum() {
      var result = [];
      for (var i = 0; i < 4; i++) {
        var ranNum = Math.ceil(Math.random() * 25); //生成一个0到25的数字
        //大写字母'A'的ASCII是65,A~Z的ASCII码就是65 + 0~25;然后调用String.fromCharCode()传入ASCII值返回相应的字符并push进数组里
        result.push(String.fromCharCode(65 + ranNum));
      }
      return result.join("");
    }
    Page({
      data: {
        cvs: {
          width: 80,
          height: 35
        },
      },
      onLoad: function () {
        const temp = getRanNum();
        this.setData({
          tuyzm: temp
        });
        this.mcaptcha = new Mcaptcha({
          el: "canvas",
          width: this.data.cvs.width,
          height: this.data.cvs.height,
          code: temp
        })
      },
      //刷新图形验证码
      onTap() {
        const temp = getRanNum();
        this.setData({
          tuyzm: temp
        });
        this.mcaptcha.refresh(temp);
      },
    })

参考:
canvas代码>mcaptcha
随机生成字母代码
demo

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容