分享你我的心得.
共乘一片美好网络.

关于qrcode生成二维码的两种方式的区别

具体做的demo如下:

1、页面元素:地址输入框,canvas方式的显示div,table方式的显示div

<input id=”urlIn” placeholder=”请输入网址”>
<div class=”qrCodeShow” id=”canvas”></div>
<div class=”qrCodeShow” id=”table”></div>

2、引入jquery支持及jquery.qrcode支持,这两个都比较好找

3、js控制二维码生成

$(function(){
//获得焦点时添加url协议头http://
$(“#urlIn”).focus(function(){
$(“#urlIn”).val(“http://”);
});

//输入框失去焦点时显示输入框值
$(“#urlIn”).blur(function () {
$(“#canvas”).empty();
$(“#table”).empty();

var url = $(“#urlIn”).val();
// alert(url)
//canvas方式生成二维码(二维码是一张图片)
$(“#canvas”).qrcode(url);
//table方式生成二维码(二维码是由<table>标签的单元格填黑白框的方式形成)
$(“#table”).qrcode({
render: “table”,
width: 200,
height: 200,
text: url
})
})

})

总结canvas方式生成二维码为图片,table方式生成二维码是背景表格形式格

赞(0)
未经允许不得转载:小叶白龙博客 » 关于qrcode生成二维码的两种方式的区别
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址