一 、使用前端生成验证码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <canvas id="canvas" width="120" height="40"></canvas>

        <a href="#" id="changeImg">看不清，换一张</a>

        <script>

            /**生成一个随机数**/

            function randomNum(min, max) {

                return Math.floor(Math.random() * (max - min) + min);

            }

            /**生成一个随机色**/

            function randomColor(min, max) {

                var r = randomNum(min, max);

                var g = randomNum(min, max);

                var b = randomNum(min, max);

                return "rgb(" + r + "," + g + "," + b + ")";

            }

            drawPic();

            document.getElementById("changeImg").onclick = function(e) {

                e.preventDefault();

                drawPic();

            }

            /**绘制验证码图片**/

            function drawPic() {

                var canvas = document.getElementById("canvas");

                var width = canvas.width;

                var height = canvas.height;

                var ctx = canvas.getContext('2d');

                ctx.textBaseline = 'bottom';

                /**绘制背景色**/

                ctx.fillStyle = randomColor(180, 240); //颜色若太深可能导致看不清

                ctx.fillRect(0, 0, width, height);

                /**绘制文字**/

                var str = 'ABCEFGHJKLMNPQRSTWXY123456789';

                for(var i = 0; i < 4; i++) {

                    var txt = str[randomNum(0, str.length)];

                    ctx.fillStyle = randomColor(50, 160); //随机生成字体颜色

                    ctx.font = randomNum(15, 40) + 'px SimHei'; //随机生成字体大小

                    var x = 10 + i * 25;

                    var y = randomNum(25, 45);

                    var deg = randomNum(-45, 45);

                    //修改坐标原点和旋转角度

                    ctx.translate(x, y);

                    ctx.rotate(deg * Math.PI / 180);

                    ctx.fillText(txt, 0, 0);

                    //恢复坐标原点和旋转角度

                    ctx.rotate(-deg * Math.PI / 180);

                    ctx.translate(-x, -y);

                }

                /**绘制干扰线**/

                for(var i = 0; i < 8; i++) {

                    ctx.strokeStyle = randomColor(40, 180);

                    ctx.beginPath();

                    ctx.moveTo(randomNum(0, width), randomNum(0, height));

                    ctx.lineTo(randomNum(0, width), randomNum(0, height));

                    ctx.stroke();

                }

                /**绘制干扰点**/

                for(var i = 0; i < 100; i++) {

                    ctx.fillStyle = randomColor(0, 255);

                    ctx.beginPath();

                    ctx.arc(randomNum(0, width), randomNum(0, height), 1, 0, 2 * Math.PI);

                    ctx.fill();

                }

            }

        </script>

    </body>

</html>

二、后端生成验证码

暂时这个

<html>

<meta http-equiv="X-UA-Compatible" content="chrome=1">

<head>

<script>

        window.onload = function() {

            draw();

            var saveButton = document.getElementById("saveImageBtn");

            bindButtonEvent(saveButton, "click", saveImageInfo);

            var dlButton = document.getElementById("downloadImageBtn");

            bindButtonEvent(dlButton, "click", saveAsLocalImage);

        };

            function draw(){

                var canvas = document.getElementById("thecanvas");

                var ctx = canvas.getContext("2d");

                ctx.fillStyle = "rgba(125, 46, 138, 0.5)";

                ctx.fillRect(25,25,100,100);

                ctx.fillStyle = "rgba( 0, 146, 38, 0.5)";

                ctx.fillRect(58, 74, 125, 100);

                ctx.fillStyle = "rgba( 0, 0, 0, 1)"; // black color

                ctx.fillText("Gloomyfish - Demo", 50, 50);

            }  

            function bindButtonEvent(element, type, handler)

            {

                   if(element.addEventListener) {

                      element.addEventListener(type, handler, false);

                   } else {

                      element.attachEvent('on'+type, handler);

                   }

            }  

            function saveImageInfo ()

            {

                var mycanvas = document.getElementById("thecanvas");

                var image    = mycanvas.toDataURL("image/png");

                var w=window.open('about:blank','image from canvas');

                w.document.write("<img src='"+image+"' alt='from canvas'/>");

            }  

            function saveAsLocalImage () {

                var myCanvas = document.getElementById("thecanvas");

                // here is the most important part because if you dont replace you will get a DOM 18 exception.

                // var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream;Content-Disposition: attachment;filename=foobar.png");

                var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

                window.location.href=image; // it will save locally

            }

        </script>

</head>

<body bgcolor="#E6E6FA">

    <div>

        <canvas width=200 height=200 id="thecanvas"></canvas>

        <button id="saveImageBtn">Save Image</button>

        <button id="downloadImageBtn">Download Image</button>

    </div>

</body>

</html>

用Canvas生成随机验证码(后端前端都可以)的更多相关文章

  1. 微信小程序 canvas 生成随机验证码

    转载:https://blog.csdn.net/qq_16646819/article/details/81020245?utm_source=blogxgwz0 js // pages/bind/ ...

  2. canvas实现随机验证码

    canvas实现随机验证码 知识点 canvas生成背景图和文字 设置字体样式和大小 String的fromCharCode(code码)生成大小写字母和数字 str.toLowerCase()转小写 ...

  3. Python使用PIL模块生成随机验证码

    PIL模块的安装 pip3 install pillow 生成随机验证码图片 import random from PIL import Image, ImageDraw, ImageFont fro ...

  4. C#生成随机验证码例子

    C#生成随机验证码例子: 前端: <tr> <td width=" align="center" valign="top"> ...

  5. pillow实例 | 生成随机验证码

    1 PIL(Python Image Library) PIL是Python进行基本图片处理的package,囊括了诸如图片的剪裁.缩放.写入文字等功能.现在,我便以生成随机验证码为例,讲述PIL的基 ...

  6. struts2生成随机验证码图片

    之前想做一个随机验证码的功能,自己也搜索了一下别人写的代码,然后自己重新用struts2实现了一下,现在将我自己实现代码贴出来!大家有什么意见都可以指出来! 首先是生成随机验证码图片的action: ...

  7. Java生成随机验证码

    package com.tg.snail.core.util; import java.awt.Color; import java.awt.Font; import java.awt.Graphic ...

  8. Python 生成随机验证码

    Python生成随机验证码  Python生成随机验证码,需要使用PIL模块. 安装: 1 pip3 install pillow 基本使用 1. 创建图片 1 2 3 4 5 6 7 8 9 fro ...

  9. Python生成随机验证码

    Python生成随机验证码,需要使用PIL模块. 安装: pip3 install pillow 基本使用 1.创建图片 from PIL import Image img = Image.new(m ...

随机推荐

  1. css中的关于margin-top，position和z-index的一些bug解决方案

    这两天在写一个demo的时候,就碰到一些css的问题,不知道能不能算bug,很有可能是因为我写的代码太少,孤陋寡闻了_(:зゝ∠)_.记录一下,以防下次遇到同样问题. 进入正题: 1.问题描述:div ...

  2. ElasticSearch和solr的差别

    Elasticsearch简介 Elasticsearch是一个实时分布式搜索和分析引擎.它让你以前所未有的速度处理大数据成为可能.它用于全文搜索.结构化搜索.分析以及将这三者混合使用:维基百科使用E ...

  3. <url-pattern>/</url-pattern>和<url-pattern>/*</url-pattern>区别

    <url-pattern>/</url-pattern>表示的为只匹配/login和/demo后面不带.xxx的网页 <url-pattern>/*</url ...

  4. Node.js的下载、安装、配置、Hello World、文档阅读

    Node.js的下载.安装.配置.Hello World.文档阅读

  5. 高通ASOC中的codec驱动

    ASOC的出现是为了让codec独立于CPU,减少和CPU之间的耦合,这样同一个codec驱动就无需修改就可以匹配任何一款平台. 在Machine中已经知道,snd_soc_dai_link结构就指明 ...

  6. HDU - 4496 City 逆向并查集

    思路:逆向并查集,逆向加入每一条边即可.在获取联通块数量的时候,直接判断新加入的边是否合并了两个集合,如果合并了说明联通块会减少一个,否则不变. AC代码 #include <cstdio> ...

  7. Codeforces103D - Time to Raid Cowavans

    Portal Description 给出长度为\(n(n\leq3\times10^5)\)的序列\(\{a_n\}\),进行\(q(q\leq3\times10^5)\)次询问:给出\(x,y\) ...

  8. 遇到502错误,invalid request block size 解决方法

    uWSGI是一个Web服务器,它实现了WSGI协议.uwsgi.http等协议.Nginx中HttpUwsgiModule的作用是与uWSGI服务器进行交换. 因为业务需求,要最多输入350个汉字,在 ...

  9. （2018干货系列一）最新Java学习路线整合

    怎么学Java Java是一门面向对象编程语言,不仅吸收了C++语言的各种优点,还摒弃了C++里难以理解的多继承.指针等概念,因此Java语言具有功能强大和简单易用两个特征. 话不多说,直接上干货: ...

  10. 如何更改Ubuntu的root密码

    安装Ubuntu系统时,只提示了设定用户密码,该密码可用于普通用户暂时获取root的权限,执行一些需要root权限的操作,而没有要求我们设置root密码,在需要用到root密码时,却想不起来,很尴尬啊 ...