基于jquery.qrcode.min.js的二维码实现

来源：互联网发布：淘宝扬琴编辑：程序博客网时间：2024/06/01 19:08

前言

对qrcode的介绍有很多，今天接触了下生成二维码相关的一些方案。个人觉得js相关的实现可能使用范围更广泛。本文算是对今天学习的一个总结，也供以后个人参考使用。

所需的环境

1）jquery-1.9.1.min.js。
2）jquery.qrcode.min.js 压缩文件或（jquery.qrcode.js和qrcode.js源码文件）
3）utf16to8.js。因为qrcode默认不支持中文，所以需要将Unicode编码转为UTF-8编码，如果不涉及中文的，不用理会这个js文件。

测试源码

<!DOCTYPE html><html><head>    <title>二维码生成方案测试</title>    <script type="text/javascript" src="./jquery-1.9.1.min.js"></script>    <script type="text/javascript" src="./jquery.qrcode.min.js"></script>    <script type="text/javascript" src="./utf16to8.js"></script></head><body><div align="center">    <input type="text" id="inputStr"><button id="btn">生成二维码</button><hr>    <div id="current" style="color:red;font-size:20px;"></div>    <div id="erWeiMa"></div></div><script type="text/javascript">    $("#btn").click(function(){        //清空二维码        $("#erWeiMa").empty();        $("#current").empty();        //输入内容验证        if($("#inputStr").val() == "")        {            alert("请输入要生成二维码的内容!");            return;        }        /**        *   参数列表        *   render   : "canvas",//设置渲染方式               width       : 256,     //设置宽度               height      : 256,     //设置高度               typeNumber  : -1,      //计算模式               correctLevel    : QRErrorCorrectLevel.H,//纠错等级               background      : "#ffffff",//背景颜色               foreground      : "#000000" //前景颜色          *        */        //生成二维码        $("#erWeiMa").qrcode({            render:"canvas",  //table canvas            text:utf16to8($("#inputStr").val())        });        $("#current").append($("#inputStr").val());        $("#inputStr").val("");    });</script></body></html>

qrcode参数说明

参数列表render   : "canvas",//设置渲染方式   width       : 256,     //设置宽度   height      : 256,     //设置高度   typeNumber  : -1,      //计算模式   correctLevel    : QRErrorCorrectLevel.H,//纠错等级   background      : "#ffffff",//背景颜色   foreground      : "#000000" //前景颜色

utf16to8.js

这个js文件主要是处理中文字符的，目的就是将Unicode编码的字符转为utf-8编码的字符。

//解决中文问题    function utf16to8(str) {           var out, i, len, c;           out = "";           len = str.length;           for(i = 0; i < len; i++) {               c = str.charCodeAt(i);               if ((c >= 0x0001) && (c <= 0x007F)) {                   out += str.charAt(i);               } else if (c > 0x07FF) {                   out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));                   out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));                   out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));               } else {                   out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));                   out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));               }           }           return out;     }

运行效果

这里写图片描述

项目源码：http://download.csdn.net/detail/u010989191/9555567

0 0