使用 JavaScript 生成二维码 —— QRCode.js

    最近在修改同事代码的时候发现了一个根据JavaScript生成二维码的语法：QRCode.js，和之前接触的不太一样，于是记录一下。

什么是 QRCode.js？

QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。

基本用法

<div id="qrcode"></div>
<script type="text/javascript">
new QRCode(document.getElementById("qrcode"), "http://www.runoob.com");  // 设置要生成二维码的链接
</script>

或者使用一些可选参数设置：

var qrcode = new QRCode("test", {
    text: "http://www.runoob.com",
    width: 128,
    height: 128,
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H
});

同样我们可以使用以下方法：

qrcode.clear(); // 清除代码
qrcode.makeCode("http://www.w3cschool.cc"); // 生成另外一个二维码

浏览器支持

支持该库的浏览器有：IE6~10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile, 等。

实例代码

HTML 代码

<div id="share">
  <img src="${pageContext.request.contextPath}/static/images/baiwan4.png">
  <div id="code" hidden="hidden"></div>
  <div class="info" >
    <div>
      <span style="font-size:0.45rem;font-weight:bold" >${fenXiao.name}</span>
      <span style="font-size:0.45rem;font-weight:bold">|</span>
      <span style="font-size:0.45rem;font-weight:bold">客户经理</span>
      <span style="font-size:0.45rem;">${fenXiao.phone}</span>
      </br>
      <span style="font-size: 0.4rem">长按图片保存到相册</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: "http://drpdev.apiins.com/myQRCode/sweepCode?workID="+workID +"&itemId="+itemId+"&businessCode="+businessCode//二维码内容
  });
  //从 canvas 提取图片 image
  function convertCanvasToImage(canvas) {
    var image = new Image();
    // 指定格式 PNG
    image.src = canvas.toDataURL("image/png");
    return image;
  }
  var mycans=$('canvas')[0];
  var img=convertCanvasToImage(mycans);
  $('.info').append("<img src="+img.src+" class='erweima' id='erweima'/>");
  new html2canvas(document.getElementById('share'),{allowTaint: true, useCORS: true}).then(canvas => {
    // canvas为转换后的Canvas对象
    let oImg = new Image();
    oImg.src = canvas.toDataURL("image/png");// 导出图片
    $('#share').empty();
    $('#share').append(oImg);
  });

text里面的内容可以在控制层里进行设置然后在进行跳转页面（还是可以随心所欲的设计自己想要的东西）。

页面没有前端做，所以很粗糙！！