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 implement two-way binding function in vue.js with pure JS

Table of contents First, let's talk about the...

Detailed steps to install nginx on Apple M1 chip and deploy vue project

brew install nginx Apple Mac uses brew to install...

Vue implements a visual drag page editor

Table of contents Drag and drop implementation Dr...

CSS3 achieves conic-gradient effect

grammar: background-image: conic-gradient(from an...

How to use dynamic parameters and calculated properties in Vue

1. Dynamic parameters Starting from 2.6.0, you ca...

jQuery realizes the picture following effect

This article shares the specific code of jQuery t...

Docker uses root to enter the container

First run the docker container Run the command as...

Share 20 excellent web form design cases

Sophie Hardach Clyde Quay Wharf 37 East Soapbox Rx...

HTML weight loss Streamline HTML tags to create web pages

HTML 4 HTML (not XHTML), MIME type is text/html, ...

A brief analysis of MySQL backup and recovery

Table of contents 1. Introduction 2. Simple defin...

Detailed steps to install the NERDTree plugin in Vim on Ubuntu

NERDTree is a file system browser for Vim. With t...

The best way to start a jar package project under Centos7 server

Preface Everyone knows how to run a jar package o...