基于jquery.qrcode.min.js生成的二维码怎么设置大小
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了基于jquery.qrcode.min.js生成的二维码怎么设置大小相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="css/bootstrap.css" rel="stylesheet" />
<script type='text/javascript' src='http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js'></script>
<script type="text/javascript" src="http://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<style>
body
font-size: 14px;
#body div
margin-top: 4rem
.clearfloat
zoom: 1
#cover
position: absolute;
left: 0px;
top: 0px;
background: rgba(0, 0, 0, 0.8);
width: 100%; /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
height: 100%;
filter: alpha(opacity=100); /*设置透明度为60%*/
opacity: 1; /*非IE浏览器下设置透明度为60%*/
display: none;
z-Index: 999;
</style>
</head>
<body>
<div id="qrcode"></div>
<script type="text/javascript">
var str = "hellow";
jQuery('#qrcode').qrcode(width: 64,height: 64,text: str);//这里可以设置大小~~
</script>
</body>
</html> 参考技术A public function qrcode($uid, $value)
$d='./Qrcode/'.$uid;
is_dir($d) || mkdir($d,0777,true);
include APP_PATH.'Class/phpqrcode.php';
$errorCorrectionLevel = 'L';//容错级别
$matrixPointSize = 4;//生成图片大小
$QR=$d.'/qrcode.png';
//生成二维码图片(参数顺序:文本内容,输出图片名称,容错级别,生成图片大小,边距,是否保存并显示)
QRcode::png($value, $QR, $errorCorrectionLevel, $matrixPointSize, 2);
$logo = './Qrcode/logo.png';//准备好的logo图片
if ($logo !== FALSE)
$QR = imagecreatefromstring(file_get_contents($QR));
$logo = imagecreatefromstring(file_get_contents($logo));
$QR_width = imagesx($QR);//二维码图片宽度
$QR_height = imagesy($QR);//二维码图片高度
$logo_width = imagesx($logo);//logo图片宽度
$logo_height = imagesy($logo);//logo图片高度
$logo_qr_width = $QR_width / 5;
$scale = $logo_width/$logo_qr_width;
$logo_qr_height = $logo_height/$scale;
$from_x = ($QR_width - $logo_qr_width) / 2;
$from_y = ($QR_width - $logo_qr_width) / 2;
//重新组合图片并调整大小
imagecopyresampled($QR, $logo, $from_x, $from_y, 0, 0, $logo_qr_width,
$logo_qr_height, $logo_width, $logo_height);
//输出图片
imagepng($QR, $d.'/myQrCode.png');
//echo '<img src="'.__ROOT__.'/'.$d.'/myQrCode.png" width="300">';
看看这段代码的参数你就明白了本回答被提问者和网友采纳 参考技术B new QRCode里面的参数不是有width和height么？ 参考技术C 这里没有回答，太多广告了
前端生成二维码插件jquery.qrcode.min.js
1.插件介绍
jquery.qrcode.min.js插件是jq系列的基于jq，在引入该插件之前要先引入jq。能够在客户端生成矩阵二维码QRCode 的jquery插件 ，使用它可以很方便的在页面上生成二维条码。
闲话少说，看demo吧！（haha...）
2.快速使用demo
简单介绍：这是一款快速应用案例，没有太特殊的需求的话够用了。鉴于需求，本例是把二维码生成了图片，可以保存到手机，然后发送给好友，直接识别二维码。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>二维码分享xx</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 7 <link rel="stylesheet" type="text/css" href="jquery.mobile-1.4.5.min.css" /> 8 <script src="jquery-1.8.3.min.js"></script> 9 <script src="jquery.mobile-1.4.5.min.js"></script> 10 <script src="jquery.qrcode.min.js"></script> 11 <style> 12 * { 13 font-family: "微软雅黑"; 14 } 15 #wxshare { 16 font-weight: normal; 17 background: #3d85c6; 18 border-radius: 5px; 19 padding: 5px 7px; 20 color: #fff; 21 border: none; 22 } 23 .tc { 24 text-align: center; 25 } 26 27 .block { 28 display: block; 29 } 30 .green { 31 color: #2d7104; 32 } 33 #myPopup small { 34 padding: 8px; 35 border-bottom: 1px solid #ccc; 36 } 37 #qrcodeImg { 38 margin-top: 20px; 39 padding: 3px; 40 border: 1px solid #ccc; 41 } 42 </style> 43 </head> 44 <body> 45 <div data-role="page"> 46 <div data-role="header" data-theme="b"> 47 <h1>七月</h1> 48 </div> 49 <div data-role="main" class="ui-content"> 50 <a id=‘wxshare‘ data-rel="popup" href="#myPopup" class="ui-btn ui-corner-all" data-transition="slidedown"><span>邀请好友</span></a> 51 <!--弹窗--> 52 <div data-role="popup" id="myPopup" data-position-to="window" class="ui-content"> 53 <div class=‘tc‘> 54 <small class="green">长按一下二维码保存图片发送给好友</small> 55 56 <div id="code"></div> 57 <img src="" id="qrcodeImg"/><br> 58 </div> 59 </div> 60 </div> 61 </div> 62 63 <script> 64 $(function() { 65 $(‘#wxshare‘).tap(function() { 66 var qrcode = $(‘#code‘).qrcode({ 67 render: "canvas", //也可以替换为table 68 width: 120, 69 height: 120, 70 text: "http://www.cnblogs.com/imelemon"/*可以通过ajax请求动态设置*/ 71 72 }).hide(); 73 //将生成的二维码转换成图片格式 74 var canvas = qrcode.find(‘canvas‘).get(0); 75 $(‘#qrcodeImg‘).attr(‘src‘, canvas.toDataURL(‘image/jpg‘)); 76 }); 77 78 }); 79 </script> 80 81 </body> 82 83 </html>
demo运行效果简略如下：有兴趣可以自己尝试一下
3.用法分析
（1）将jquery.qrcode.min.js和jquery添加到您的网页中
1 <script src="jquery-1.8.3.min.js"></script> 2 <script type="text/javascript" src="jquery.qrcode.min.js"></script>
注意：2中demo引入jqueryMobile是为了样式和交互效果加的。基本引入这两个就可以使用了！
（2）然后要创建一个二维码的容器：
<div id="code"></div>
（3）加入js在容器中创建二维码：
<script> $(function() { $(‘#wxshare‘).tap(function() { var qrcode = $(‘#code‘).qrcode({ render: "canvas", //也可以替换为table width: 120, height: 120, text: "http://www.cnblogs.com/imelemon/p/6677956.html"/*可以通过ajax请求动态设置*/ }).hide(); //将生成的二维码转换成图片格式 var canvas = qrcode.find(‘canvas‘).get(0); $(‘#qrcodeImg‘).attr(‘src‘, canvas.toDataURL(‘image/jpg‘)); }); }); </script>
4.进阶用法
（1）设置二维码大小
//生成100*100(宽度100，高度100)的二维码 jQuery(‘#qrcode‘).qrcode({ render : "canvas",//也可以替换为table width : 100,//单位是像素 height : 100, text : "http://www.cnblogs.com/imelemon/p/6677956.html" });
（2）设置二维码颜色
//生成前景色为红色背景色为白色的二维码 jQuery(‘#qrcode‘).qrcode({ render : "canvas",//也可以替换为table foreground: "#C00", background: "#FFF", text : "http://www.cnblogs.com/imelemon/p/6677956.html" 7 });
（3）设置二维码生成方式
//使用table/canvas生成 jQuery(‘#qrcode‘).qrcode({ render : "table",//使用canvas生成就设置为 canvas text : "http://www.cnblogs.com/imelemon/p/6677956.html" });
（3）将二维码转成图片格式：
->如2中demo
$(‘#wxshare‘).tap(function() { var qrcode = $(‘#code‘).qrcode({ render: "canvas", //也可以替换为table width: 120, height: 120, text: "http://www.cnblogs.com/imelemon"/*可以通过ajax请求动态设置*/ }).hide(); //将生成的二维码转换成图片格式 var canvas = qrcode.find(‘canvas‘).get(0); $(‘#qrcodeImg‘).attr(‘src‘, canvas.toDataURL(‘image/jpg‘)); });
注意：二维码如果过长生成的二维码会有问题，建议直接url字符串不要过长150个字符以内；
参考：http://www.jq22.com/jquery-info294
以上是关于基于jquery.qrcode.min.js生成的二维码怎么设置大小的主要内容，如果未能解决你的问题，请参考以下文章
使用jquery.qrcode.min.js实现前台二维码生成（带Logo）