使⽤JavaScript⽣成⼆维码——QRCode.js
最近在修改同事代码的时候发现了⼀个根据JavaScript⽣成⼆维码的语法：QRCode.js，和之前接触的不太⼀样，于是记录⼀下。
什么是 QRCode.js？
QRCode.js 是⼀个⽤于⽣成⼆维码的 JavaScript 库。主要是通过获取 DOM 的标签，再通过 HTML5 Canvas 绘制⽽成，不依赖任何库。基本⽤法
<div id="qrcode"></div>
<script type="text/javascript">
new ElementById("qrcode"), "www.runoob"); // 设置要⽣成⼆维码的链接
</script>
或者使⽤⼀些可选参数设置：
var qrcode = new QRCode("test", {
text: "www.runoob",
width: 128,
height: 128,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
遗嘱执行人});
同样我们可以使⽤以下⽅法：
qrcode.clear(); // 清除代码
qrcode.makeCode(""); // ⽣成另外⼀个⼆维码
二月二龙抬头短信
浏览器⽀持
⽀持该库的浏览器有：IE6~10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile, 等。
实例代码
HTML 代码
<div id="share">
<img src="${tPath}/static/images/baiwan4.png">
<div id="code" hidden="hidden"></div>
<div class="info" >
<div>
<span >${fenXiao.name}</span>
<span >|</span>
<span >客户经理</span>
<span >${fenXiao.phone}</span>
</br>
工商银行信用卡登陆<span >长按图⽚保存到相册</span>
</div>
</div>
</div>
<div class="mine-another" id="code"></div>
<input type="hidden" name="workID" id="workID" value="${workID}" />
<input type="hidden" name="itemId" id="itemId" value="${itemId}" />
<input type="hidden" name="businessCode" id="businessCode" value="${businessCode}" />
CSS 代码
* {
padding: 0;
margin: 0;
}
#share {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
/
* background-image: url(/static/images/baiwan4.jpg); background-size: 100% 100%;
background-repeat: no-repeat;*/
/*background-color: #4C59ED;*/
}
#share .erweima {
width: 2rem;
height: 2rem;
}
#invitation{
position: fixed;
z-index: 100;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,.8);
/*display: none;*/
}
#invitation img {
position: absolute;西印度岛位于哪里
right: 0;
width: 5rem;
}
#invitation span{
position: absolute;
top: 4.3rem;
left: 6.5rem;
font-size: .34rem;
color: white;
text-align: center;
line-height: .8rem;
width: 2.5rem;
height: .8rem;
border: 1px solid #fff;
border-radius: .7rem;
}
钢琴家.info {
background: rgba(0,0,0,0.31);
padding: .2rem 0.4rem;
display: flex;
position: absolute;
justify-content: space-between;
align-items: center;
bottom: 0rem;
古人描写小雪节气的经典诗句left: 0;
right: 0;
line-height: 0.4rem;
font-size: .15rem;
}
.info span {
line-height:0.7rem;
margin-left:0.48rem;
}
#share img{
width: 100%;
height: 100%;
}
JavaScript 代码
var workID=$("#workID").val();
var itemId=$("#itemId").val();
var businessCode=$("#businessCode").val();
$("#code").qrcode({
render: "canvas", //canvas⽅式
width: 200, //宽度
height:200, //⾼度
text: "drpdev.apiins/myQRCode/sweepCode?workID="+workID +"&itemId="+itemId+"&businessCode="+businessCode//⼆维码内容 });
//从 canvas 提取图⽚ image
function convertCanvasToImage(canvas) {
var image = new Image();
// 指定格式 PNG
image.src = DataURL("image/png");
return image;
}
var mycans=$('canvas')[0];
var img=convertCanvasToImage(mycans);
$('.info').append("<img src="+img.src+" class='erweima' id='erweima'/>");
new ElementById('share'),{allowTaint: true, useCORS: true}).then(canvas => {
// canvas为转换后的Canvas对象
let oImg = new Image();
oImg.src = DataURL("image/png");// 导出图⽚
$('#share').empty();
$('#share').append(oImg);
});
text⾥⾯的内容可以在控制层⾥进⾏设置然后在进⾏跳转页⾯（还是可以随⼼所欲的设计⾃⼰想要的东西）。
页⾯没有前端做，所以很粗糙！！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论