生成二维码 jQuery + php 实现

最新推荐文章于 2018-11-14 09:18:00 发布

canglingyue

最新推荐文章于 2018-11-14 09:18:00 发布

阅读量760

点赞数

分类专栏： php js+jq 文章标签：二维码 php jQuery

本文链接：https://blog.csdn.net/canglingyue/article/details/45074271

版权

js+jq 同时被 2 个专栏收录

69 篇文章 0 订阅

订阅专栏

php

22 篇文章 0 订阅

订阅专栏

二维码生成有几种常见方法

1、谷歌api ，但是在中国无法访问

2、jQuery实现

jQuery.qrcode
库下载地址：http://share.weiyun.com/0d58167a90e2d0adb57f2fdd2da8ffe9

jquery库下载http://share.weiyun.com/9463a26c4294ed2bfb43d7c9f45de46a

方法1：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>使用jquery.qrcode生成二维码</title>
<style type="text/css">

.bym_mask{margin:0;padding:0;border:none;width:100%;height:100%;background:#333;opacity:0.6;filter:alpha(opacity=60);z-index:9999;position:fixed;top:0;left:0;display:none;}
#bym_LoginBox{position:absolute;left:460px;top:150px;background:white;width:240px;height:272px;border:2px solid #444;border-radius:7px;z-index:10000;display:none;}
.bym_row{background:#f7f7f7;padding:0px 20px;line-height:50px;height:50px;font-weight:bold;color:#666;font-size:20px;border-radius:7px;}
.close_btn{font-family:arial;font-size:30px;font-weight:700;color:#999;text-decoration:none;float:right;padding-right:4px;}


</style>

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
<script type="text/javascript">
$(function(){

	$("#bym_sub_btn").click(function(){
		$("#bym_code").empty();
		var str = toUtf8($("#bym_mytxt").val());
		
		$("#bym_code").qrcode({
			render: "table",
			width: 200,
			height:200,
			text: str
		});
	});
})
function toUtf8(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;   
}  
	$(function ($) {
		//弹出层
		

		$("#bym_sub_btn").on('click', function () {
			$("body").append("<div id='bym_mask'></div>");
			$("#bym_mask").addClass("bym_mask").fadeIn("slow");
			$("#bym_LoginBox").fadeIn("slow");

        
		});

				
		//关闭
		$(".close_btn").hover(function () { $(this).css({ color: 'black' }) }, function () { $(this).css({ color: '#999' }) }).on('click', function () {
			$("#bym_LoginBox").fadeOut("fast");
			$("#bym_mask").css({ display: 'none' });
		});
	});

	</script>

</head>

<body>		


        <p><input type="text" class="input" id="bym_mytxt" value="11" width = "10px">
		
			<a id="bym_sub_btn" value="">点击显示二维码</a>
		</p>
   		
   
    <div id="bym_LoginBox">
        <div class="bym_row">
            扫描二维码
			<a href="javascript:void(0)" title="关闭窗口" class="close_btn" id="closeBtn">×</a>
			<div id="bym_code" >
				
			</div>
        </div>
		
    </div>

</body>
</html>

方法二：

<script type="text/javascript">

    $(function(){

        $(".closeGuide").click(function(){
            $("#maskDiv").hide();
            $("#newGuide").hide();
            $("#getQrcode").hide();
        });

        $(".m_sj").click(function(){
            $("#maskDiv").height(window.screen.height);
            $("#maskDiv").width(window.screen.width);
            $("#maskDiv").show();
            $("#getQrcode").show();
            $("#qrcode").empty();
            $("#qrcode").qrcode({width: 187,height: 187,text: $(this).attr('rel')});

        });
    });
</script>

<div class="exm_qr">
        <a href="javascript:void(0)" class="m_sj" title="获取二维码" rel="http://………/index.php?g=Wap&m=Store&a=product&token=<?php echo $token;?>&id={jhcms:$hostlist.id}&wecha_id={wechat_id}&twid=">
            获取二维码 </a>
    </div>

    <style type="text/css">
    .exm_qr{
    float:left;
    width:40px;
    height:40px;
    margin:20px 0 5px 5px;
    }

    </style>
    <!-- 点击显示二维码 -->


    <div id="getQrcode"
    style="display: none; z-index: 2; border-radius:9px;/*圆角*/
    -webkit-border-radius: 9px; -moz-border-radius: 9px;position: fixed; left: 40%; top: 30%; width: 280px;
    height: 280px; box-shadow: 10px 0 60px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.3); background-color: white">
    <div style="background-color: white; height: 45px; top: 0;border-radius:9px;-webkit-border-radius: 9px; -moz-border-radius: 9px;">
    <div class="closeGuide"
    style="width: 20px; margin-right: 10px; margin-top:5px;padding-top: 8px; float: right; text-align: right; cursor: pointer; color: black"
    title="点击关闭">X</div>
    </div>
    <div style="width: 100%; height: 160px; text-align: center;">
    <div id="qrcode" style="padding-left: 0px"></div>
</div>
<div
    style="width: 100%; height: 60px; text-align: center; margin-top: 40px;font-size:16px;">
    扫描二维码查看</div>
 </div>

    <!-- 点击显示二维码结束 -->

3、纯php实现

php类库

Qrcode.class.php

下载地址：http://share.weiyun.com/6d4811ad5b9a9d6b63b624cd6a72de94

<?php
include "Qrcode.class.php";
$qr = new Qrcode();
//$qr->jpg('你好');   //输出jpg格式二维码图片
$qr->png('你好');     //输出png格式二维码图片

canglingyue

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
生成二维码 jQuery + php 实现

二维码生成有几种常见方法1、谷歌api ，但是在中国无法访问2、jQuery实现jQuery.qrcode库下载地址：http://share.weiyun.com/0d58167a90e2d0adb57f2fdd2da8ffe9jquery库下载http://share.weiyun.com/9463a26c4294ed2bfb43d7c9f45de46a方法1：
复制链接

扫一扫

专栏目录