生成二维码

最新推荐文章于 2022-02-05 18:22:11 发布

uhhuh-495

最新推荐文章于 2022-02-05 18:22:11 发布

阅读量129

点赞数

分类专栏：功能（方法）实现案例文章标签：二维码 JavaScrip 前端

本文链接：https://blog.csdn.net/weixin_42166007/article/details/96610256

版权

功能（方法）实现案例专栏收录该内容

26 篇文章 0 订阅

订阅专栏

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>生成二维码</title>
    <link rel="stylesheet" type="text/css" href="css/qrcode.css">
	<!-- 引入库文件 -->
	<script src="js/jquery-1.11.3.min.js"></script>
	<script src="js/jquery.qrcode.min.js"></script>
</head>
<body>

    <div>
        <label for="qr_text">URL:</label>      
        <input id="qr_text" type="text" value="" /> 
        <button id="qr_btn" value="button">生成二维码</button>
    </div>

    <div class="cavans_qr">
        <h2>canvas创建二维码</h2>
        <div id="qr_container"></div>
    </div>

    <div class="image_qr">
        <h2>生成二维码图片</h2>
        <div id="imgDiv"></div>
    </div>

    <!-- <div class="image_qr">
        <h2>table创建二维码</h2>
        <div id="code"></div>
    </div> -->

<script type="text/javascript" src="js/qrcode.js"></script>
</body>
</html>

Css：

#qr_text{
    
}
.cavans_qr{
	width: 250px;
	text-align: center;
}
.image_qr{
	width: 250px;
	text-align: center;
}

Js：

/*注：空值二维码扫码不到*/

//页面加载完成
$(document).ready(function(){
    // 点击生成二维码--begin
    $('#qr_btn').click(function(){  
        /*如果已生成过二维码，则删除二维码img图片和canvas，重新生成；反之，则直接生成二维码*/
        if($('#imgDiv:has(img)').length!=0){   //#imgDiv:has(img):选取所有包含有<img>元素在其内的id为imgDiv元素；
            $('canvas').remove();   //移除上一个二维码画布
            $('#imgDiv img').remove();  //移除上一个二维码图片 
            createQr();   //执行生成二维码生成函数
        }else{
            createQr();   //执行生成二维码生成函数
        }
    });
    // 点击生成二维码--end

    // 生成二维码--begin
    function createQr(){
        document.createElement('canvas').getContext('2d');   //创建画布
        var valText = $('#qr_text').val();   //获取需要生成二维码数据
 
        // 采用正则表达式判断输入的内容是否是中文--begin
        var reg=/^[\u0391-\uFFE5]+$/; 
        if(valText != "" && !reg.test(valText)){    //test():检测一个字符串是否匹配某个模式
            // 如果不是中文，直接将输入的内容转换成二维码
            $('#qr_container').qrcode({render:"canvas",height:180,width:180,correctLevel:0,text:valText});   //canvas方式；correctLevel:容错级别;colorDark:前景色;colorLight:背景色
            //$("#code").qrcode({render:"table",width: 200,height:200,text:valText});  //table方式 
        }else{
            // 如果是中文，直接将输入的内容字符串转换成UTF-8，然后再转换成二维码
            $('#qr_container').qrcode({render:"canvas",height:180, width:180,correctLevel:0,text:utf16to8(valText)});   //canvas方式
            //$("#code").qrcode({render:"table",width: 200,height:200,text:utf16to8(valText)});  //table方式
        }
        // 采用正则表达式判断输入的内容是否是中文--end
 
        var mycanvas1=document.getElementsByTagName('canvas')[0];   //获取网页中的canvas对象
 
        //将转换后的img标签插入到html中
        var img = convertCanvasToImage(mycanvas1);  //提取图片
        $('#imgDiv').append(img);//imgDiv表示你要插入的容器id
    }
    // 生成二维码--begin
 
    // 字符编码--begin
    function utf16to8(str) {  
        var out, i, len, c;  
        out = "";
        len = str.length;  //获取数据长度 
        for(i = 0; i < len; i++) {  
            c = str.charCodeAt(i);  //charCodeAt(x):返回指定位置(x)的字符的Unicode编码
            if ((c >= 0x0001) && (c <= 0x007F)) {  
                out += str.charAt(i);  //charAt():返回指定位置的字符
            } else if (c > 0x07FF) {  
                out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));  //String.fromCharCode(numX,numX,...,numX):接受一个(或多个)指定的 Unicode 值，然后返回一个字符串
                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;  
    }
    // 字符编码--end
 
    // 从canvas中提取图片image--begin
    function convertCanvasToImage(canvas) {
        //创建新Image对象
        var image = new Image();
        // 指定格式PNG
        image.src = canvas.toDataURL("image/png");   // canvas.toDataURL():返回的是一串Base64编码的URL
        return image;
    }
    // 从canvas中提取图片image--begin

});

uhhuh-495

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
生成二维码

HTML：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>生成二维码</title> <link rel="stylesheet" type="text/css" href="css/qrcode.css"&gt...
复制链接

扫一扫