一 、使用前端生成验证码

<!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. .net core 2.0学习笔记（二）：部署到Windows和Liunx系统

    .Net Core最大的亮点就是跨平台了,下面介绍下在Windows下和Liunx下的部署. 首先发布项目文件,点击网站项目右键 发布: 从下图发布的文件图片可以看出,不像以前bin目录下有很多dll ...

  2. Shell脚本报错：-bash: ./switch.sh: /bin/bash^M: bad interpreter: No such file or directory

    在学习shell中测试case参数命令代码如下 #!/bin/bash #switch测试 case $1 in     start)         echo 'start'     ;;      ...

  3. Python 实现单例模式的一些思考

    一.问题:Python中如何实现单例模式 单例模式指一个类只能实例化一个对象. 二.解决方案: 所有资料参考于: http://python.jobbole.com/87294/ https://ww ...

  4. nyoj135 取石子（二） Nimm博弈

    思路:计算每堆石子的SG值,然后异或得到总的SG值,如果SG=0则输,否则赢. 每堆石子的SG值等于m%(n+1),可以自己推算一下. AC代码 #include <cstdio> #in ...

  5. java基础之继承（二）

    上篇我们介绍了java中的构造方法,了解了关键字this和super在继承中所起到的作用,this可以显式调用重载的构造方法,super可以显式的调用父类中的任意可见方法.了解方法重载和重写的区别,知 ...

  6. 经典案例之MouseJack

    引言:在昨天的文章<无线键鼠监听与劫持>中,我们提到今天会向您介绍一个无线键鼠的监听与劫持的经典案例,<MouseJack>:MouseJack能利用无线鼠标和键盘存在的一些问 ...

  7. PHP simpleXML文件编程

    SimpleXML simpleXML该技术的核心思想是以面向对象的方式来操作xml文件 <?php //simplexml文件 讲所有的元素转成对象 $library=simplexml_lo ...

  8. R语言︱文件读入、读出一些方法罗列（批量xlsx文件、数据库、文本txt、文件夹）

    笔者寄语:小规模的读取数据的方法较为简单并且多样,但是,批量读取目前看到有以下几种方法:xlsx包.RODBC包.批量转化成csv后读入. R语言中还有一些其他较为普遍的读入,比如代码包,R文件,工作 ...

  9. SOCKET 编程TCP/IP、UDP

    TCP/IP 资源:http://download.csdn.net/detail/mao0514/9061265 server: #include<stdio.h> #include&l ...

  10. hihocoder Challenge 29 D. 不上升序列

    这场爆零比赛题目还是要补的 这道题据说是出烂掉的原题,我找了下 CF13.C/ CF371 div1 C,一模一样 我服这群原题大佬 为 当时,使 不严格递增的最小步数,那么 Otherwise 显然 ...