一 、使用前端生成验证码

<!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. git ssh 配置

    创建并切换到 ~/.ssh(存在就直接切换过去) 运行 ssh-keygen 创建 rsa 文件 复制 .pub 的文件内容,添加到网站的公钥列表 Git\etc\ssh\ssh_config 中添加 ...

  2. Flask從入門到入土(三)——Web表單

    Flask-WTF擴展可以把處理Web表單的過程變成一種愉悅的體驗.這個擴展對獨立的WTForms包進行了包裝,方便集成到Flask程序中. Flask-WTF及其依賴可使用pip安裝: pip in ...

  3. Golang http 服务器

    package main import ( "net/http" "fmt" ) func main() { app := http.NewServeMux() ...

  4. spring oauth2 ,spring security整合oauth2.0 JdbcTokenStore实现 解决url-pattern .do .action

    参考以下两个文章: http://www.cnblogs.com/0201zcr/p/5328847.html http://wwwcomy.iteye.com/blog/2230265 web.xm ...

  5. 2015最新Android学习线路图

    Android是一个以Linux为基础的半开源操作系统,主要用于移动设备,由Google和开放手持设备联盟开发与领导.据2011年初数据显示仅正式上市两年的操作系统Android已经跃居全球最受欢迎的 ...

  6. ARM开发软件ADS教程

    ARM开发软件ADS教程 ADS(ARM Developer Suite)是ARM公司推出ARM集成开发环境,操作简单方便,获得广大开发人员的青睐.下面使用ADS v1.2做一个实例教程,帮助大家学会 ...

  7. HI3531例子程序说明

    Hisilicon Hi35xx 样例程序使用说明 1. 样例程序文件结构说明    sample            # MPP 样例程序     |-- common       # hi35x ...

  8. 将搜狗词库（.scel格式）转化为txt格式

    参考:http://blog.csdn.net/zhangzhenhu/article/details/7014271 #!/usr/bin/python # -*- coding: utf-8 -* ...

  9. Parse Fatal Error at line 41 column 24: 元素类型 "url-pattern" 必须由匹配的结束标记 "</url-pattern>" 终止

    1.错误描述 严重: Parse Fatal Error at line 41 column 24: 元素类型 "url-pattern" 必须由匹配的结束标记 "< ...

  10. GetBitmapFromScreen

    int GetBitmapFromScreen() { char *lpBuf; HBITMAP hBitmap,hOld ; HDC hDC,hcDC; BITMAP bb;BITMAPINFO b ...