js canvas implements verification code and obtains verification code function

js canvas implements verification code and obtains verification code function

This article example shares the specific code of js canvas to make and obtain verification codes for your reference. The specific content is as follows

I have written some small plug-ins recently. Today I will talk about the js code that packages a verification code, as follows:

/**Package**/
var xh_digital_code = function(option) {
    this.el = option.el;
    var self = this;
    var click_code = '';

    var canvas_id = "xh_canvas_" + xh_randomWord(false, 30); // Generate a random id
    $(self.el).html('<canvas class="xh_canvas" id="' + canvas_id + '"></canvas>');

    var code = xh_drawPic(canvas_id);

    $('body').on('click', self.el, function() {
        click_code = xh_drawPic(canvas_id);
        self.code = click_code;
        return;
    });
    
    self.code = code;
}

/**Draw the verification code image**/
function xh_drawPic(canvasid) {
    var canvas = document.getElementById(canvasid);
    var width = canvas.width;
    var height = canvas.height;
    //Get the 2D drawing environment of the canvas var ctx = canvas.getContext('2d');
    ctx.textBaseline = 'bottom';
    /**Draw the background color**/
    ctx.fillStyle = xh_randomColor(180, 240);
    //If the color is too dark, it may not be clear ctx.fillRect(0, 0, width, height);
    /**Draw text**/
    var str = 'ABCEFGHJKLMNPQRSTWXY123456789abcefghjklmnpqrstwxy';
    var code = "";
    //Generate four verification codes for (var i = 1; i <= 4; i++) {
        var txt = str[xh_randomNum(0, str.length)];
        code = code + txt;
        ctx.fillStyle = xh_randomColor(50, 160);
        //Randomly generate font color ctx.font = xh_randomNum(90, 110) + 'px SimHei';
        // Randomly generate font size var x = 10 + i * 50;
        var y = xh_randomNum(100, 135);
        var deg = xh_randomNum(-30, 30);
        //Modify the coordinate origin and rotation angle ctx.translate(x, y);
        ctx.rotate(deg * Math.PI / 180);
        ctx.fillText(txt, 0, 0);
        //Restore the coordinate origin and rotation angle ctx.rotate(-deg * Math.PI / 180);
        ctx.translate(-x, -y);
    }

    /**Draw interference line**/
    for (var i = 0; i < 3; i++) {
        ctx.strokeStyle = xh_randomColor(40, 180);
        ctx.beginPath();
        ctx.moveTo(xh_randomNum(0, width / 2), xh_randomNum(0, height / 2));
        ctx.lineTo(xh_randomNum(0, width / 2), xh_randomNum(0, height));
        ctx.stroke();
    }
    /**Draw interference points**/
    for (var i = 0; i < 50; i++) {
        ctx.fillStyle = xh_randomColor(255);
        ctx.beginPath();
        ctx.arc(xh_randomNum(0, width), xh_randomNum(0, height), 1, 0, 2 * Math.PI);
        ctx.fill();
    }
    return code;
}



/**Generate a random number**/
function xh_randomNum(min, max) {
    return Math.floor(Math.random() * (max - min) + min);
}

/**Generate a random color**/
function xh_randomColor(min, max) {
    var r = xh_randomNum(min, max);
    var g = xh_randomNum(min, max);
    var b = xh_randomNum(min, max);
    return "rgb(" + r + "," + g + "," + b + ")";
}

/**Generate a random code**/
function xh_randomWord(randomFlag, min, max) {
    var str = "",
        range = min,
        arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', ​​'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];

    // Randomly generate if (randomFlag) {
        range = Math.round(Math.random() * (max - min)) + min;
    }
    for (var i = 0; i < range; i++) {
        pos = Math.round(Math.random() * (arr.length - 1));
        str += arr[pos];
    }
    return str;
}

The above is the verification code js I packaged. You can just copy it and use it. The following is the reference code:

<!--- Quote--->
<span class="identify-code"></span>
<button class="xh-btn xh-btn-success" id="get_code">Get verification code</button>

<script type="text/javascript">
  var c = new xh_digital_code({
        el: '.identify-code' // .class name#id name});

    $('#get_code').click(function(){
     // This is a pop-up information plug-in I wrote. Ignore it. c.code can get the information in the verification code. $(this).xh_prompt('success', 'The current verification code is: '+c.code, 1000);
    });
</script>

The effect diagram is as follows:

The above is the effect picture

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • Native js+canvas to implement verification code
  • js+h5 canvas realizes image verification code
  • js+canvas draws graphic verification code
  • JavaScript uses canvas to draw random verification codes
  • JS+HTML5 canvas drawing verification code example
  • JavaScript Canvas implements verification code
  • js+canvas realizes verification code function
  • js+canvas realizes the function of sliding puzzle verification code
  • How to generate verification code using canvas and js
  • js realizes the countdown effect of clicking to get the verification code

<<:  Nginx forwarding based on URL parameters

>>:  Implementation of nginx proxy port 80 to port 443

Recommend

How to use history redirection in React Router

In react-router, the jump in the component can be...

Detailed explanation of how to migrate a MySQL database to another machine

1. First find the Data file on the migration serv...

React useMemo and useCallback usage scenarios

Table of contents useMemo useCallback useMemo We ...

Implementation of Vue top tags browsing history

Table of contents nonsense Functions implemented ...

Binary installation of mysql 5.7.23 under CentOS7

The installation information on the Internet is u...

Implementation of single process control of Linux C background service program

introduce Usually a background server program mus...

Detailed explanation of Nginx timed log cutting

Preface By default, Nginx logs are written to a f...

Detailed explanation of the use of MySQL DML statements

Preface: In the previous article, we mainly intro...

Specific use of Bootstrap5 breakpoints and containers

Table of contents 1. Bootstrap5 breakpoints 1.1 M...

How to configure Openbox for Linux desktop (recommended)

This article is part of a special series on the 2...

How to hide and remove scroll bars in HTML

1. HTML tags with attributes XML/HTML CodeCopy co...

How to upload projects to Code Cloud in Linux system

Create a new project test1 on Code Cloud Enter th...