一 、使用前端生成验证码

<!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. ubuntu16.04编译安装mysql-boost-5.7.21并编译成php扩展测试与使用

    我之前的文章已经改造了自定义MVC框架中的工具类(验证码,图片上传,图像处理,分类)4个类,接下来,就要改造模型类,模型类肯定要连接数据库,由于我的Ubuntu Linux是裸装的php(目前只编译了 ...

  2. HDU - 1248 寒冰王座 数学or暴力枚举

    思路: 1.暴力枚举每种面值的张数,将可以花光的钱记录下来.每次判断n是否能够用光,能则输出0,不能则向更少金额寻找是否有能够花光的.时间复杂度O(n) 2.350 = 200 + 150,买350的 ...

  3. ANTD mobile源码分析 -- popover

    最近的开发中要用到很多的各式各样的组件.但是发现ant design mobile(后面简称ANTDM)里很多的资源.于是就分析一下,学习学习. ANTDM直接使用了typescript,没有用ES2 ...

  4. Phpstrom操作git

    1.PHPstrom操作git[上传] 2.提交代码到仓库 2. 3.使用git bash上传代码仓库的代码到远程服务器 代开git bash进入到项目所在的目录,输入命令$  git push .上 ...

  5. 火狐浏览器导出EXCEL 表格，文件名乱码问题

    牢骚:今天又是一个不太平的日子,打开任务表一看里面有一堆bug,其中有一个就是今天要说的这个关于商品导出的问题,本功能是临时授命接一个任务,本来呢这个导出功能在系统各大模块已经都很成熟了,但是总有一个 ...

  6. php中静态变量和静态方法。

    在php类的内部当使用static进行修饰了类的属性或者方法,则改属性或者方法被成为类的静态属性或者静态访问, 静态属性和非静态属性的区别 php官方的解释 声明类成员或方法为static,就可以不实 ...

  7. 大数据处理的三种框架：Storm，Spark和Samza

    许多分布式计算系统都可以实时或接近实时地处理大数据流.下面对三种Apache框架分别进行简单介绍,然后尝试快速.高度概述其异同. Apache Storm 在Storm中,先要设计一个用于实时计算的图 ...

  8. 利用ffmpeg将H264流 解码为RGB

    利用H264解码分为几个步骤: 注意一点在添加头文件的时候要添加extern "C",不然会出现错误 [cpp] view plaincopy extern "C&quo ...

  9. C# 带偏移量自定义分页方法

    /// <summary> /// 带偏移量自定义分页方法 /// </summary> /// <param name="PageSize"> ...

  10. Python与Mongodb交互

    MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统 MongoDB 旨在为WEB应用提供可扩展的高性能数据存储解决方案 MongoDB 将数据存储为一个文档,数据结构由键值 ...